jQuery-隐藏/显示与所选收音机相关的元素

我想

仅在选中带有
name='method'
的收音机时才显示图标和
隐藏文本。此代码的问题在于，当我选择其他收音机时，该功能不会重置未选择收音机的原始状态，此时图标隐藏，文本显示

我无法获取函数的
else
部分，以将收音机重置回其原始状态（文本显示，图标隐藏）


$（“input[name='method']）。在（“change”，function（）上{
var text=$（this）.closest（“.item”）.find（.text”）；
var icon=$（this）.closest（.item”）.find（.icon”）；
hide（）；
text.show（）；
如果（$（this）.is（“：checked”））{
text.hide（）；
icon.show（）；
}否则{
hide（）；
text.show（）；
}
});


选择？

选择？
您的设计假定，当先前选中的单选按钮未选中时，将触发更改事件。事实上，事实并非如此；仅当收音机的状态从“未检查”更改为“已检查”时，更改事件才会激发。如果你重新设计时考虑到这一点，你应该会没事的

在下面的演示中，我添加了：

console.log( this.checked );

为了证明这一点。因此，不需要if语句，因为对于触发更改事件的每个单选按钮，
this.checked
都是
true
，因此永远不会执行else部分。
因此，以下两行应注意重置文本和图标：

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

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

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

注意


另一种方法是显示所有文本并隐藏所有图标（不需要
.not（）
），然后隐藏文本并显示选中收音机的图标

演示


$（“input[name='method']）。在（“change”，function（）上{
console.log（this.checked）；
var text=$（this）.closest（“.item”）.find（.text”）；
var icon=$（this）.closest（.item”）.find（.icon”）；
var alltext=$（'.item>.text'）；
var allIcons=$（'.item>.icon'）；
text.hide（）；
icon.show（）；
alltext.not（text.show（）；
allIcons.not（icon.hide（）；
})
.filter（':checked'）.change（）

1.
选择？
2.
选择？
我猜这可能是一个学生项目，所以我不想改变您选择的方式，所以我将帮助您解决您提到的问题。下面，我将一步一步地介绍您遇到问题的原因，以及您可以采取哪些措施来克服这些问题

1。当您单击没有
name='method'
的单选按钮时，不会发生任何事情的原因，因为只有单击具有该名称的输入才能触发处理程序：

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

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

3.现在，单击仍然只适用于最近的
文本和图标。这是“方法”输入的查找，但如果单击不是“方法”输入，则需要重置所有“方法”输入的文本和图标。您可以这样做：

// 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，则可以更轻松地进行管理，例如，在
项
divs上添加一个额外的类，以便更轻松地更改与“方法”输入关联的文本和图标元素。在设计HTML时，还要考虑如何在代码中访问它们

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


/*函数查找所有“方法”输入并重置它们*/
函数reseticontext（）{
$（“.radiocontainer输入[name='method']”）。每个（函数（i）{
$（this.parent（“.text”）.show（）；
$（this.parent（“.text”）.prev（“.icon”）.hide（）；
});
}
//设置方法输入的默认状态
resetIconsText（）；
$（“.radiocontainer input”）。在（“单击”，函数（）{
var text=$（this）.closest（“.item”）.find（.text”）；
var icon=$（this）.closest（.item”）.find（.icon”）；
if（$（this.attr（'name'）==“method”）{
如果（$（this）.is（“：checked”））{
text.hide（）；
icon.show（）；
}否则{
hide（）；
text.show（）；
}
}否则{
resetIconsText（）；
}
});


选择？

选择？

非方法-重置方法图标和文本
如果包含
console.log（this.checked），会发生什么情况在事件处理程序中？
// 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:
});