将jQuery.click(）函数用于单个元素

Use jQuery .click() function with an individual element

本文关键字：用于 单个 元素 函数 jQuery click      更新时间：2023-09-26

我只想在用户点击标签按钮时显示汤博乐博客上的标签列表。为此，我使用了这个HTML和jQuery。

HTML

  <span class="tags-link">Tags</span>
  <ul class="tags">
    <li> <a href="{TagURL}">{Tag}</a> </li>
  </ul>

jQuery

$(document).ready(function(){
    $(".tags-link").click(function() {
        $(".tags").slideDown(700, function(){
            //end animation
        });
    });
});

每次我点击.tags-link，页面上就会显示每个.tags，我只想显示用户点击的帖子。我最近开始学习jQuery，在这里我有点迷路了。。。

您可以使用.next()http://api.jquery.com/next/

$(this).next(".tags").slideDown(700, function(){

您需要针对仅作为下一个相邻元素的tags：

$(document).ready(function(){
    $(".tags-link").click(function() {
        $(this).next(".tags").slideDown(700, function(){
            //end animation
        });
    });
});

您可以在带有类"tags-link"的span和带有类"tag"的ul上设置数据属性。然后，当您单击".tags-link"元素时，它将显示具有相同数据属性的".tags"元素。

例如：

HTML

<span class="tags-link" data-id="1">Tags</span>
<ul class="tags" data-id="1">
  <li> <a href="{TagURL}">{Tag}</a> </li>
</ul>

jQuery

$(document).ready(function(){
    $(".tags-link").click(function() {
        var id = $(this).attr('data-id');
        $(".tags[data-id='" + id + "']").slideDown(700, function(){
            //end animation
        });
    });
});
相关文章：