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

これでうまくいくと思いましたが、 または の代わりにtestまたはdivthe 2shows3を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());
});

デモ

sをクリックしてバインドしますdiv。

$('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 を 1 回クリックする真の (そして効率的な) 方法は、イベント委任を使用することです。

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

シングル クリックは親 (「ラップ」) に関連付けられ、実際にクリックされた子を検出します。

于 2012-12-13T03:33:31.467 に答える
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 に答える