在 div 上单击显示具有相同类的列表项答案

【问题标题】：On div click reveal list item with the same class在 div 上单击显示具有相同类的列表项
【发布时间】：2016-12-14 06:06:58
【问题描述】：

我需要能够单击具有特定类的 div 并让它显示具有相同类的列表项。我觉得这应该很简单，但我对 jQuery 比较陌生。我正在使用这个：

$('.minibox').on('click', function (){
    var txt = $(this).attr('name');
    $('ul').append("<li class='list'>"+txt+"</li>");
});

但出于几个原因，我想不使用 append 方法。我认为 toggleClass 可能是我正在寻找的，但我不确定如何在这种情况下使用它。我还希望能够再次单击“.minibox”以删除列表项，因此我假设 toggleClass 就是我要查找的内容。

感谢任何帮助

【问题讨论】：

在您的示例中，您似乎正在尝试在单击框时将列表项动态添加到 DOM。有必要吗？是否可以让元素存在于 DOM 中但隐藏，并在单击框后将其显示更改为可见？
是的！这几乎肯定是要走的路。我遇到麻烦的是协调类部分。使用 toggleClass 打开可见性并不是什么大问题，如果有意义的话，它可以确保第一个 div 的目标是正确的列表项。我应该更具体！
所以有多个列表项，您想确保切换正确的一项吗？您可以将目标列表项的类或 id 作为数据属性保存在框本身上，然后在您的点击处理程序中，只需从 click 元素中读取 id 或类，并使用它来选择要切换的类w3schools.com/tags/att_global_data.asp
其实，如果你认为这是你想做的，我可以把这个写下来作为答案
我正在查看它，它似乎可以工作！花一秒钟时间让我思考一下，因为我不擅长这个，但是，去吧！非常感谢。

标签： jquery append toggleclass

【解决方案1】：

你可以给你点击的元素一个指向你想要切换的列表元素的属性。例如，如果您的列表是这样的

<ul>
    <li class="first">something</li>
    <li class="second">something else</li>
<li>

然后你可以在你的按钮上指明你想像这样切换的类

<button data-target-toggle="first">click me!</button>

然后您的点击处理程序可以从按钮读取数据并使用它来选择列表元素

$("button").click(function(){
    var targetClass = $(this).data("target-toggle");
    var targetElement = $("." + targetClass);
    //now you can do what you want to your targetElement, ie. show() or hide()
}

【讨论】：

【解决方案2】：

你需要的基本东西：

var t = true;
$('.minibox').click(function (){
    var txt = $(this).attr('name');

    if(t==true)
    {
        $('ul').append("<li class='list'>"+txt+"</li>");
        t=false;
    }
    else
    {
        $('ul > .list').remove();
        t=true;
    }

});

但在我这边，你只需要像这样隐藏和显示整个列表：

var t = true;
    $('.minibox').click(function (){
    	var txt = $(this).attr('name');

    	if(t==true)
        {
            $('.ul').find('li').text(txt);
    		$('.ul').show();
    		t=false;
    	}
    	else
        {
           $('.ul').find('li').text("");
    		$('.ul').hide();
    		t=true;
    	}
    	
    });

.ul{display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="ul">
<li></li>
</ul>
<a href="#" class="minibox" name="Olala man">Click</a>

这是基本的。

【讨论】：