2

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

谢谢你的帮助

4

3 回答 3

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>

于 2020-07-20T13:40:14.883 回答
0

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

  • 只有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>

于 2020-07-20T13:43:28.820 回答
0

解决方案是：

  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>

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

于 2020-07-20T14:08:30.847 回答