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

Question

Trying to use one click function for all of my div boxes. Did some research but still not able to get it working correctly. I'm new to programming so I might be going about this the wrong way, here is an example of what I'm trying to do:

<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)
    })
})

I thought this would work but if I click on div test 2 or 3 the alert shows "display this text 1" instead of "display this text 2" or "...3" .

Any idea what I'm doing wrong?

Answer 1

Don't need each .

Bind click on p of each div

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

demo

Bind click on div s.

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

$('p', this).text() is the same of $(this).find('p').text()

Answer 2

Remove .parent() . Otherwise you're getting all the nested .example elements, and retrieving the .attr('p') of the first one.

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

Or shortened like this:

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

---

Your question shows that you're getting a proper text result, though your code shows .attr("p") , which would not. I've left it the way it was to keep the code example the same.

Answer 3

I would change the divs into a class then select them like so:

<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>

and the JS:

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

Here's a working example: http://jsfiddle.net/CX555/1/

Answer 4

The true (and efficient) way to have one click for all your divs is to use event delegation:

<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>

script:

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

demo: http://jsfiddle.net/hDX8C/

The single click is attached to the parent ("wrap"), and detects which child was actually clicked.