jQuery-隐藏/显示与选定电台相关的元素

我猜这可能是一个学生项目,所以我不想改变你选择的方式,所以我会帮你解决你提到的问题。下面,我将逐步介绍你遇到问题的原因,以及你可以做些什么来克服它们。

1. 当你点击一个没有的单选按钮时,什么也不会发生的原因 name='method' 因为你的处理程序被触发了 只有 通过点击具有该名称的输入:

$("input[name='method']").on("change", function() {

2. 要在所有输入点击上运行函数,您需要将处理程序添加到所有输入中,检查输入名称,然后显示或隐藏单选按钮(注意,我为您的输入添加了一个名为 radiocontainer ,因此我们不会无意中在您的页面上选择其他输入):

$(".radiocontainer  input").on("change", function() {
  if ($(this).attr('name') == "method") {
      //show icon and hide text
  }
  else{
      //hide icons and show text for "method" inputs
  }
}

3. 现在,点击仍然只适用于 closest 文本和图标。这是为“方法”输入找到的,但如果单击不是在“方法”的输入上,则需要重置文本&图标用于 全部的 “方法”输入。你可以这样做:

// get all the inputs with name="method"
$("input[name='method']").each(function(i) {
    $inputparent = $(this).parent(".text"); // get the input's parent with the "text" class...
    $inputparent.show();  //... and show it
    $inputparent.prev(".icon").hide(); // now get the previous sibling to the "text" with the icon class and hide it:
});

注: :如果你可以更改HTML,那么管理起来会更容易,例如在 item div,使更改与“方法”输入相关的文本和图标元素变得更加容易。在设计HTML时,还要考虑如何在代码中访问它们。

工作示例 将所有这些放在一起:

/* function to find all "method" inputs and reset them */
function resetIconsText() {
  $(".radiocontainer input[name='method']").each(function(i) {
    $(this).parent(".text").show();
    $(this).parent(".text").prev(".icon").hide();
  });
}
// set up the default state for the method inputs
resetIconsText();

$(".radiocontainer input").on("click", function() {

  var text = $(this).closest(".item").find(".text");
  var icon = $(this).closest(".item").find(".icon");

  if ($(this).attr('name') == "method") {
    if ($(this).is(":checked")) {
      text.hide();
      icon.show();
    } else {
      icon.hide();
      text.show();
    }
  } else {
    resetIconsText();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="radiocontainer">
  <div class="item">
    <div class="icon"></div>
    <label class="text">choose?
    <input type="radio" name="method">
  </label>
  </div>
  <div class="item">
    <div class="icon"></div>
    <label class="text">choose?
    <input type="radio" name="method" checked>
  </label>
  </div>

  <div class="item">
    <div class="icon"></div>
    <label class="text">Not method - reset method icons and text
    <input type="radio" name="notmethod">
  </label>
  </div>
</div>

您的设计假设,当取消选中之前选中的单选按钮时,更改事件会触发。事实并非如此;仅当无线电状态从未选中更改为选中时,更改事件才会触发。如果你在重新设计时考虑到这一点,你应该会没事的。

在下面的演示中,我添加了:

console.log( this.checked );

为了证明这一点。因此,不需要if语句,因为对于触发更改事件的每个单选按钮 this.checked 是 true 所以其他部分永远不会被执行。 因此,以下两行应负责重置文本和图标:

allTexts.not(text).show();
allIcons.not(icon).hide();

此外,在末尾添加了以下代码,以保持初始状态的一致性:

.filter(':checked').change();

注:

• 另一种方法是显示所有文本并隐藏所有图标(不需要 .not() ),然后隐藏文本并显示选中收音机的图标。

DEMO

$("input[name='method']").on("change", function() {
  console.log( this.checked );
  var text = $(this).closest(".item").find(".text");
  var icon = $(this).closest(".item").find(".icon");
  var allTexts = $('.item > .text');
  var allIcons = $('.item > .icon');

  text.hide();
  icon.show();
  allTexts.not(text).show();
  allIcons.not(icon).hide();
})
.filter(':checked').change();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">
  <div class="icon">1</div>
  <label class="text">choose?
    <input type="radio" name="method">
  </label>
</div>
<div class="item">
  <div class="icon">2</div>
  <label class="text">choose?
    <input type="radio" name="method" checked>
  </label>
</div>