1 
<script type="text/javascript">
                         $(document).ready(function(){
                             $('a#extra').click(function(event){
                                if($(this).attr('class') == 'extra'){
                                    event.preventDefault();
                                    $(this).append('<div style="float:left;color:red;margin-left:10px;">Please Login/Register to view Details</div>').slideToggle(1000);

                                }
                             });
                         });
                     </script>

アンカー属性のクラスに従って div を追加するためのこの jquery があります。

<a href="" class="extra_1" id="extra"></a>
<a href="" class="extra_2"  id="extra"></a>
<a href="" class="extra_3"  id="extra"></a>

上記のコードのようなクラスを確認できますが、extra_1 クラスの要素をクリックしてその要素に追加する場合のように、extra_1、extra_2、extra_3 を確認するにはどうすればよいですか?

4

3 に答える 3

2

JQuery セレクターを a#extra から .extra に変更してみてください。# はセレクターの ID に使用されます。

于 2012-08-29T06:58:16.123 に答える
1

間違ったセレクターを使用しています。'a＃extra'の代わりに'a.extra'を使用してください。そのセレクターを使用する場合、コールバック関数内でそのクラスをチェックする必要はありません。

$(document).ready(function(){
     $('a.extra').click(function(event){                               
        event.preventDefault();
        $(this).append('<div style="float:left;color:red;margin-left:10px;">Please Login/Register to view Details</div>').slideToggle(1000);
        });
});
于 2012-08-29T06:55:48.950 に答える
0

ID は一意である必要があります。セレクターは、extra の ID を持つ最初の要素のみを選択します。

<a href="" class="extra_1 extra"></a>
<a href="" class="extra_2 extra"></a>
<a href="" class="extra_3 extra"></a>


$(document).ready(function() {
    $('a.extra').click(function(event) {
         event.preventDefault();
         $(this).append('<div style="float:left;color:red;margin-left:10px;">Please Login/Register to view Details</div>').slideToggle(1000);
    });
});
于 2012-08-29T07:21:20.297 に答える