3

尝试对我的所有 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"

知道我做错了什么吗？

4

4 回答 4

9

不需要each。

绑定p每个点击div

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

演示

绑定点击divs。

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

$('p', this).text()是一样的$(this).find('p').text()

于 2012-12-13T03:11:06.720 回答
1

删除.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")，但事实并非如此。我将其保留为保持代码示例相同的方式。

于 2012-12-13T03:08:37.003 回答
0

我会将 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/

于 2012-12-13T03:16:52.970 回答
0

一键点击所有 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/

单击附加到父级（“wrap”），并检测实际单击了哪个子级。

于 2012-12-13T03:33:31.467 回答