2

動的に作成されるアイテムとボタンがあり、jquery でスタイリングしてユーザーに何が起こっているかを表示したい (私は AJAX を使用しています)。各項目は次のようになります。

<li class="items">
<div class="itemheading">
<div class="controls"> 
    <span class="votes">1</span>
    <form class="actions" method="POST">
        <input type="submit" class="button plus" value="+1" data-plus="123">
    </form>
    <form class="actions" method="POST">
        <input type="submit" class="button minus" value="-1" data-minus="123">
    </form>  
    <form class="actions" method="POST">
        <input type="submit" class="button delete" value="X" data-del="123">
    </form></div><span class="title">Item title</span>
</div>
<span class="infotext">Item Description</span>
</li>

ボタンをクリックすると、アイテムのスタイルが更新されます。たとえば、+1 ボタンをクリックすると、アイテムの境界線が緑色にフェードアウトし、数秒の間に何も表示されなくなり、そのアイテムが投票されたことを示します。

これまでに考えたことは次のとおりです。

$(".plus").live('click', function() {
 $(this).css("background", "#fff");

ただし、これは機能しません。$(this)ボタンのデータタグ値を取得するために既にこれを使用しているため、クリックされたボタンを参照するために使用できると思いました。

var plus = $(this).data('plus');

もう1つの問題は、たとえそれが機能したとしても、ボタンの境界線のスタイルを設定し、何らかの方法でスタイルを設定する必要があること<div class="itemheading">です. .itemheading 要素のスタイルを指定することもできますが、そのクラスのアイテムが複数あるため、別の方法を見つける必要があります。おそらく、要素の親を参照する方法があり、その親を取得できますか?

ありがとう。どんな助けでも本当に感謝しています。

更新: 人々は、コードで何が機能したかを確認できます。

$(".plus").live('click', function() {
 $(this).parents(".itemheading").css("background", "#000");
});​
4

2 に答える 2

1

2つの問題、

マイナーな問題は、.liveが非推奨になっていることです。代わりに、.onを使用してくださいhttp://api.jquery.com/on/

主な問題は、これらのボタンが動的に追加されるとおっしゃっていたので、要素が作成される前に.liveイベントをバインドしていると思います。バインディングは、すでに存在する要素に対してのみ機能します。

これを修正するには、イベント自体を常に存在する親要素にバインドして、その子のクリックを処理する必要があります。そのようです：

$('.parent').on('click', '.plus', function(){
    $(this).css({background: "black"});
});

これにより、.parentの子孫である.plus要素をクリックするたびに、作成された時期に関係なく、関数が実行されるようになります。

すべてではなく、関連する要素にのみ変更を適用するようにする場合は、トラバースを使用してください（http://api.jquery.com/category/traversing/）

トラバースとは、要素が$（this）に対してどこにあるかを言うことで要素にアクセスできることを意味します。$（this）.siblings（'。myClass'）が$（this）と同じ要素にある.myClass要素のみを選択するようにします

于 2012-07-18T12:34:34.173 に答える
1

これが実際の例です。それがあなたの意見であるかどうかはわかりませんが、+1ボタンをクリックすると、class plus with class .itemheading の親要素が黒く点滅します。

例 - http://jsfiddle.net/yZmrz/

于 2012-07-18T12:30:39.903 に答える