Question

尝试对我的所有div框使用一个单击功能。做了一些研究，但仍然无法使其正常工作。我是编程的新手，所以我可能会以错误的方式解决这个问题，这是我正在尝试做的一个例子：

<div id="test_1">
  <p class="example">display this text 1</p>
</div>

<div id="test_2">
  <p class="example">display this text 2</p>
</div>

<div id="test_3">
  <p class="example">display this text 3</p>
</div>

$('div[id^="test"]').each(function(){
    $(this).click(function(){
        test = $(this).parent().find('.example').attr("p")
        alert(test)
    })
})

我认为这会有效，但如果我点击div测试2或3 alert显示"display this text 1"而不是"display this text 2"或"...3"。

知道我做错了吗？

Answer 1

不需要each。

点击每个p

的div

$('div[id^="test"] p').click(function() {
    alert($(this).text());
});

demo

点击div s。

$('div[id^="test"]').click(function() {
    alert($('p', this).text());
});

$('p', this).text()与$(this).find('p').text()

相同

Answer 2

删除.parent()。否则，您将获得所有嵌套的.example元素，并检索第一个元素的.attr('p')。

$('div[id^="test"]').each(function(){
    $(this).click(function(){
        var test = $(this).find('.example').attr("p")
        alert(test)
    })
})

或者缩写为：

$('div[id^="test"]').click(function(){
    var test = $(this).find('.example').attr("p")
    alert(test)
})

您的问题表明您获得了正确的文字结果，但您的代码显示.attr("p")，但不会。我把它保留为保持代码示例相同的方式。

Answer 3

我会将div更改为一个类，然后像这样选择它们：

<div class="clickable">
    <p>This is the first one</p>
</div>
<div class="clickable">
    <p>This is the second one</p>
</div>
<div class="clickable">
    <p>This is the third one</p>
</div>

和JS：

$(function() {
    $('.clickable').on('click',function() {
        alert($(this).children(':first').text());
    });
});

以下是一个有效的例子：http://jsfiddle.net/CX555/1/

Answer 4

单击所有div的真正（有效）方法是使用事件委派：

<div id="wrap">
<div id="test_1">
  <p class="example">display this text 1</p>
</div>
<div id="test_2">
  <p class="example">display this text 2</p>
</div>
<div id="test_3">
  <p class="example">display this text 3</p>
</div>
</div>

脚本：

$('#wrap').on('click','div[id^="test"]',function(){
    test = $(this).find('.example').text();
    alert(test);
});

演示：http://jsfiddle.net/hDX8C/

单击附加到父（“换行”），并检测实际点击了哪个孩子。

一个Jquery单击函数用于乘法div

4 个答案: