用js写一段代码 定义一个div 首次点击执行A事件 二次点击执行B事件 三次点击执行A事件 以此类推
时间: 2024-05-04 19:15:14 浏览: 11
可以这样写:
```
var count = 0;
var myDiv = document.getElementById('myDiv');
myDiv.onclick = function() {
count++;
if (count % 2 === 1) {
// 第1次、第3次、第5次...点击执行A事件
A();
} else {
// 第2次、第4次、第6次...点击执行B事件
B();
}
};
function A() {
console.log('执行A事件');
}
function B() {
console.log('执行B事件');
}
```
其中,首先定义一个计数器 `count`,然后获取到需要绑定事件的 div 元素 `myDiv`,在点击事件中,把计数器加 1,并判断计数器的奇偶性,奇数次执行 A 事件,偶数次执行 B 事件。最后在外部定义 A 和 B 两个事件函数即可。
相关问题
div标签下的a标签添加点击事件选中和取消选中 写一个代码实例
可以使用 JavaScript 和 CSS 来实现这个功能。以下是一个简单的示例代码:
HTML 代码:
```html
<div id="myDiv">
<a href="#" class="myLink">Link 1</a>
<a href="#" class="myLink">Link 2</a>
<a href="#" class="myLink">Link 3</a>
</div>
```
CSS 代码:
```css
.myLink {
display: block;
padding: 10px;
background-color: #f5f5f5;
border: 1px solid #ddd;
}
.myLink.selected {
background-color: #ddd;
}
```
JavaScript 代码:
```javascript
var links = document.querySelectorAll('#myDiv .myLink');
links.forEach(function(link) {
link.addEventListener('click', function(event) {
event.preventDefault();
this.classList.toggle('selected');
});
});
```
在这个示例中,我们首先使用 `querySelectorAll` 获取了 `<div>` 元素下所有带有 `myLink` 类名的 `<a>` 元素。然后,我们给每个 `<a>` 元素绑定了一个点击事件监听器,在点击时使用 `toggle` 方法来切换 `selected` 类的存在。最后,我们使用 CSS 样式来控制选中和取消选中的效果。
ajax里拼接的div标签下的a标签添加点击事件选中和取消选中 写一个代码实例
可以按照以下步骤编写代码:
1. 给每个 a 标签添加一个 class 名称,以便在后续操作中方便定位它们。
2. 在点击事件中,获取当前点击的 a 标签的 class 名称,如果该标签已经被选中,则移除选中状态;否则添加选中状态。
以下是示例代码:
HTML 代码:
```html
<div id="container">
<div>
<a href="#" class="option">选项1</a>
<a href="#" class="option">选项2</a>
<a href="#" class="option">选项3</a>
</div>
</div>
```
JavaScript 代码:
```javascript
// 获取所有的 a 标签
var options = document.querySelectorAll(".option");
// 遍历每个 a 标签,并为其添加点击事件
for (var i = 0; i < options.length; i++) {
options[i].addEventListener("click", function(event) {
// 阻止默认行为,避免页面跳转
event.preventDefault();
// 判断当前标签是否已经被选中
if (this.classList.contains("selected")) {
// 如果已经选中,则移除选中状态
this.classList.remove("selected");
} else {
// 如果未选中,则添加选中状态
this.classList.add("selected");
}
});
}
```
CSS 代码:
```css
/* 选中状态下的样式 */
.selected {
background-color: #f00;
color: #fff;
}
```