Question

我想显示另一个元素中输入的文本的值。该代码在页面上有多个实例，因此我想使用类而不是ID选择项目。

问题是我无法使用this选择h2。

以下是简化版本：

HTML：

<div class="block">
  <h2>Text to be replaced</h2>
  <div class="block__content">
    <div class="form-group">
      <label for="candidate-name">Name of Candidate</label>
      <input type="text">
    </div>
  </div>
</div>

JQUERY：

$('input').on("input", function() {
  $(this).closest('h2').text($(this).val());
});

如果我取出this就可以了，所以我知道该函数的其余部分是正确的，所以我认为this存在问题：

$('input').on("input", function() {
  $('h2').text($(this).val());
});

但是我想选择最接近的h2，所以我不会影响其他所有h2。

我this的使用方式有问题吗？

谢谢

Answer 1

.closest()为您提供最接近的 parent 。您尝试选择的h2元素不是输入的直接父级，而是父级的同级。

您可以获取closest .block元素，然后访问h2 child。

例如

$('input').on("input", function() {
  $(this).closest('.block').children('h2').text($(this).val());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="block">
  <h2>Text to be replaced</h2>
  <div class="block__content">
    <div class="form-group">
      <label for="candidate-name">Name of Candidate</label>
      <input type="text">
    </div>
  </div>
</div>

Answer 2

我不确定这是否可访问。

当您使用CSS Grid设置表单样式时，嵌套的div也很烦人。

请确保该表格在语义上有意义，并考虑对标题使用其他元素，除非它确实是标题，否则请勿使用它。如果要标记表单，则具有字段集和图例。 H2可能不是真正想要的航向。

但是您希望表格漂亮。您可以做的是使用伪选择器，然后将它们放在javascript中，使其内容等于要显示的标题。表单-甚至大的表单也应该很简单，通常表明它变得骇人听闻的迹象表明UX出问题了。

可以使用某些屏幕尺寸上隐藏的标签标记表单。如果您使用带有占位符的HTML 5表单元素，则可以。辅助技术人员仍能获得他们的标签。

因此，不是您想要的答案，而是使表单保持简单易维护。使用CSS Grid响应式地设置样式。对装饰元素使用伪选择器。确保它可访问（且简单）。然后，您会发现脚本编写更加容易，甚至不需要jQuery，而只需使用普通JS中的选择器即可。

如何使用类在div中使用输入的值

2 个答案: