jQuery - 显示具有相同类的元素答案

【问题标题】：jQuery - show elements that has same classjQuery - 显示具有相同类的元素
【发布时间】：2020-07-20 13:34:24
【问题描述】：

我有两个 ul 列表标签，它们包含具有相同类的输入。

我想要做的是显示与我在键盘上键入的输入具有相同类的元素，如果当前具有相同类的输入为空，则隐藏。

示例：如果我想使用“test1”类写入输入，我希望显示另一个列表中的“test1”类元素：

<ul id="contTestA">
    <li><input type="text" class="test1" /></li>
    <li><input type="text" class="test2" /></li>
    <li><input type="text" class="test3" /></li>
</ul>

<ul id="contTestB">
    <li class="test1" style="display:none;"><input type="text"  /></li>
    <li class="test2" style="display:none;"><input type="text"  /></li>
    <li class="test3" style="display:none;"><input type="text"  /></li>
</ul>

感谢您的帮助

【问题讨论】：

你有没有尝试过？输入上的数据属性会使这个更干净。

标签： javascript html jquery class

【解决方案1】：

您可以在 input 事件中使用.attr() 获取当前元素的类并显示当前类的元素：

$('#contTestA > li > input').on('input', function(){
  var curCls = $(this).attr('class');
  $(`#contTestB > li.${curCls}`).show();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="contTestA">
<li><input type="text" class="test1"/></li>
<li><input type="text" class="test2"/></li>
<li><input type="text" class="test3"/></li>
</ul>

<ul id="contTestB">
<li class="test1" style="display:none;"><input type="text" /></li>
<li class="test2" style="display:none;"><input type="text" /></li>
<li class="test3" style="display:none;"><input type="text" /></li>
</ul>

【讨论】：

伙计，这太完美了！！谢谢！！如果输入为空，如何隐藏具有相同类的元素？ :)

【解决方案2】：

这是一个依赖于一些假设的简单解决方案：

input 只有一个类（如果有更多，可以考虑自定义属性）
li 也只有一个类（同注）

$("#contTestA input").on("change", function(){
  $("#contTestB li").css("display", "none");
  $("li."+$(this).attr("class")).css("display", "block");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="contTestA">
  <li><input type="text" class="test1"/></li>
  <li><input type="text" class="test2"/></li>
  <li><input type="text" class="test3"/></li>
</ul>

<ul id="contTestB">
  <li class="test1" style="display:none;"><input type="text" /></li>
  <li class="test2" style="display:none;"><input type="text" /></li>
  <li class="test3" style="display:none;"><input type="text" /></li>
</ul>

【讨论】：

【解决方案3】：

解决办法是：

获取活动输入的类
隐藏#contTestB中的所有元素
仅显示与同一类匹配的项目

$("input[type=text]").on("input", function() {
  var currentInput = $(this);
  $("#contTestB li").css("display", "none");
  if (currentInput.val().length > 0) {
    var currentClass = currentInput.attr("class").trim();
    $("." + currentClass).css("display", "block")
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul id="contTestA">
    <li><input type="text" class="test1" /></li>
    <li><input type="text" class="test2" /></li>
    <li><input type="text" class="test3" /></li>
</ul>

<ol id="contTestB">
    <li class="test1" style="display:none;">1<input type="text" /></li>
    <li class="test2" style="display:none;">2<input type="text" /></li>
    <li class="test3" style="display:none;">3<input type="text"/></li>
</ol>

使用这种方法，您将使用attr('class') 函数获取当前类名，该函数返回li 中使用的所有类，我的建议是使用另一个属性名，如下所示：

<li><input type="text" data-target="test3" class="test3" /></li>

这样，您将使用attr() 函数仅获取属性data-target，语法为attr('data-target')

【讨论】：