Question

我有以下代码来选择元素＆amp;如果特定类与当前元素匹配则动态添加

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

我想添加到我点击的锚元素，但上面的代码不起作用，请帮助

Answer 1

改为使用.hasClass，

$(this).attr('class')将返回整个类属性，例如"extra extra_120"。

更改

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

到

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

的更新 的

没有注意到你使用相同的id，而不是相同的id，只需使用class就可以了。还有一个问题，您应该在.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>

Answer 2

您也不应该有多个具有相同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>

Answer 3

 <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”等其他类挂起来链接

使用jquery＆amp;选择元素根据选择添加动态新元素

3 个答案: