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

Use .hasClass instead,

$(this).attr('class') will return the whole class attribute like "extra extra_120".

Change

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

to

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

Update:

Didn't notice you use same ids, instead of same ids, just use class will be ok. And one more problem, you should redirect the page in the callback of .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”等另一个类的链接

于 2012-08-29T09:13:19.483 回答