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

Question

我有两个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>

感谢的帮助

Answer 1

您可以使用.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>

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

Answer 3

解决方案是：

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

$("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')