jquery - 如何将新的 Div 添加到特定元素

Question

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

我有这个 jquery 用于根据锚属性中的类添加 div。

<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_2、extra_3，比如如果单击带有extra_1 类的元素然后添加到该元素

Answer 1

尝试将您的 JQuery 选择器从 a#extra 更改为 .extra。# 用于选择器中的 ID。

Answer 2

You use a wrong selector. Use 'a.extra' instead of 'a#extra'. If you use that selector, you don't need to check for that class inside the callback function:

$(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);
        });
});

Answer 3

ID 必须是唯一的，您的选择器只选择 ID 为 extra 的第一个元素。

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