0

特定のクラスが現在の要素と一致する場合、要素を選択して動的に追加する次のコードがあります

<script type="text/javascript">
                         $(document).ready(function(){
                              $('a#extra').click(function(event){
                                 // alert($(this).attr('class'));
                                if($(this).attr('class') == 'extra'){
                                    event.preventDefault();
                                    $(this).append('<div style="float:left;color:red;margin-left:10px;font:20px;margin: 3px 0 0 10px;">Please Login/Register to view Details</div>').slideToggle(5000);
                                    window.location.href='http://weddingsinwinnipeg.ca/signin/';
                                }
                             });
                         });
                     </script>

<a href="" class="extra extra_120" id="extra"></a>
<a href="" class="extra extra_145" id="extra"></a>
<a href="" class="extra extra_156" id="extra"></a>

クリックしたアンカー要素に追加したいのですが、上記のコードが機能しません。助けてください

4

3 に答える 3

0

また、同じ ID 値を持つ要素を複数持つべきではありません。これを読んでください：http://css-tricks.com/the-difference-between-id-and-class/

そう、

<a href="" class="extra extra_120" id="extra"></a>
<a href="" class="extra extra_145" id="extra"></a>
<a href="" class="extra extra_156" id="extra"></a>

する必要があります

<a href="" class="extra extra_120" id="extra1"></a>
<a href="" class="extra extra_145" id="extra2"></a>
<a href="" class="extra extra_156" id="extra3"></a>
于 2012-08-29T09:03:24.687 に答える
0

代わり.hasClassに、

$(this).attr('class')のようなクラス属性全体を返します"extra extra_120"。

変化する

 if($(this).attr('class') == 'extra'){

に

 if($(this).hasClass('extra')){

アップデート：

同じIDの代わりに同じIDを使用していることに気づきませんでした。クラスを使用するだけで問題ありません。もう 1 つの問題として、 のコールバックでページをリダイレクトする必要があります.slideDown。

<script type="text/javascript">
$(document).ready(function () {
    $('a.extra').click(function (event) {
        event.preventDefault();
        $(this).append('<div style="float:left;color:red;margin-left:10px;font:20px;margin: 3px 0 0 10px;">Please Login/Register to view Details</div>').slideToggle(5000, function () {
            window.location.href = 'http://weddingsinwinnipeg.ca/signin/';
        });
    });
});
</script>

<a href="" class="extra extra_120"></a>
<a href="" class="extra extra_145"></a>
<a href="" class="extra extra_156"></a>
于 2012-08-29T08:59:00.227 に答える
0 
 <script type="text/javascript">
                         $(document).ready(function(){
                              $('.extralink').click(function(event){
                                 // alert($(this).attr('class'));
                                if($(this).attr('class') == 'extra'){
                                    event.preventDefault();
                                    $(this).append('<div style="float:left;color:red;margin-left:10px;font:20px;margin: 3px 0 0 10px;">Please Login/Register to view Details</div>').slideToggle(5000);
                                    window.location.href='http://weddingsinwinnipeg.ca/signin/';
                                }
                             });
                         });
                     </script>

<a href="" class="extra extra_120 extralink " ></a>
<a href="" class="extra extra_145 extralink " "></a>
<a href="" class="extra extra_156 extralink " ></a>

これがあなたが探しているものだと思います。あなたの質問を間違って理解したかどうか教えてください。私が考える解決策は、「extralink」のような別のクラスで「extra」クラスのリンクをパークすることです

于 2012-08-29T09:13:19.483 に答える