jquery - JQuery 多次点击事件？

Question

我的页面中有两个 div。

<div id="test-1000"></div>
<div id="test-1111"></div>

鉴于上述单击事件源 jQuery 是：

$('#test-1000').click(function(){});

但是如何实现两个div用类似上面的语句来监听点击事件，又如何区分div，哪个是点击事件呢？

Answer 1

我将使用一个通用的类属性来对所有目标元素进行分组

<div class="test" id="test-1000" data-id="1000"></div>
<div class="test" id="test-1111" data-id="1111"></div>

然后

$('.test').click(function(){
    //here this.id will give the clicked div id and this will refer the clicked dom element
    //$(this).data('id') will give 1000/1111
})

Answer 2

只需$(this)在回调函数中使用即可知道事件触发的“哪个”元素。

$('.test').click( function() {
    alert( $(this).attr('id') );
});

Answer 3

HTML

  <div class="test" id="test-1000" data-id="1000"></div>
    <div class="test" id="test-1111" data-id="1111"></div>

JS

$('.test').click(function(){
    //here this.id will give the clicked div id and this will refer the clicked dom element
    //$(this).data('id') will give 1000/1111
});

Answer 4

我更喜欢使用数据属性和类方法

HTML 代码

<div class="test" data="0000">1</div>
<div class="test" data="1111">2</div>

js

$('.test').click(function(){
   alert($(this).attr("data"));
});

示例演示

Answer 5

或者，如果您不想或不能修改您的 html，您可以使用jquery "starts-with" 选择器。

<div id="test-1000"></div>
<div id="test-1111"></div>

$("[id^='test']").on('click', function(){
    console.log(this.id);
});

提琴手

Answer 6

也许是这样的：

document.getElementById("test-1000").onclick = function(){});

在定义之前，您不能使用该元素。