Javascript 使用选中的不同比率隐藏不同的div

你好 如何将此代码转换为通用代码。目前它只适用于一种情况。如果我有两个，它将不起作用

多谢各位

$document.readyfunction{ $'input[type=radio]'。单击函数{ 如果$this.attr'id'=='watch me'{ $‘show-me’。show； } 否则{ $‘show-me’。隐藏； } }; }; 你是会员吗？ 对 不 请输入您的会员号码 您必须设置一个公共类，并对所选单选按钮进行dom遍历

需要注意的是：

对单选按钮使用更改事件而不是单击事件。 使用该值检测单选按钮，而不是嗅探其id。 $document.readyfunction{ $'input[type=radio]'。changefunction{ $this.closest'fieldset'.find'.show me'.togglethis.value==yes； }; }; 你是会员吗？ 对 不 请输入您的会员号码 对 不 请输入您的会员号码 对 不 请输入您的会员号码 您必须设置一个公共类，并对所选单选按钮进行dom遍历

需要注意的是：

对单选按钮使用更改事件而不是单击事件。 使用该值检测单选按钮，而不是嗅探其id。 $document.readyfunction{ $'input[type=radio]'。changefunction{ $this.closest'fieldset'.find'.show me'.togglethis.value==yes； }; }; 你是会员吗？ 对 不 请输入您的会员号码 对 不 请输入您的会员号码 对 不 请输入您的会员号码 如果我有两个，它将不起作用

为什么？：：因为如果你只是复制/粘贴同一个结构两次，你会有重复的ID，这是无效的，使你的JS代码毫无用处

您需要的是一个基于类名或attr的结构，如下所示：

$document.readyfunction{ $'input[type=radio]'。单击函数{ 如果$this.attr'value'=='yes'{ $this.sibbins'.show me'.show； } 否则{ $this.兄弟姐妹“.给我看”.隐藏； } }; }; .给我看看{ 显示：无； } 你是会员吗？ 对 不 请输入您的会员号码 对 不 请输入您的会员号码 如果我有两个，它将不起作用

为什么？：：因为如果你只是复制/粘贴同一个结构两次，你会有重复的ID，这是无效的，使你的JS代码毫无用处

您需要的是一个基于类名或attr的结构，如下所示：

$document.readyfunction{ $'input[type=radio]'。单击函数{ 如果$this.attr'value'=='yes'{ $this.sibbins'.show me'.show； } 否则{ $this.兄弟姐妹“.给我看”.隐藏； } }; }; .给我看看{ 显示：无； } 你是会员吗？ 对 不 请输入您的会员号码 对 不 请输入您的会员号码

---

对于不同的值，可以这样做

函数showHideinput{ var attrVal=$input.attr'id'； 开关属性{ “看我”一案： $'show-me-2'。隐藏； $‘show-me’。show； 打破 请看我也许： $‘show-me’。隐藏； $‘show-me-2’。show； 打破 违约： $'show-me-2'。隐藏； $‘show-me’。隐藏； 打破 } } $document.readyfunction{ $'input[type=radio]'。每个函数{ 显示这一点； }; $'input[type=radio]'。单击函数{ 显示这一点； }; }; 你是会员吗？ 对 不 大概 请输入您的会员号码 请输入您的会员号码2

---

对于不同的值，可以这样做

函数showHideinput{ var attrVal=$input.attr'id'； 开关属性{ “看我”一案： $'show-me-2'。隐藏； $‘show-me’。show； 打破 请看我也许： $‘show-me’。隐藏； $‘show-me-2’。show； 打破 违约： $'show-me-2'。隐藏； $‘show-me’。隐藏； 打破 } } $document.readyfunction{ $'input[type=radio]' .每个功能{ 显示这一点； }; $'input[type=radio]'。单击函数{ 显示这一点； }; }; 你是会员吗？ 对 不 大概 请输入您的会员号码 请输入您的会员号码2

---

我试图在不考虑任何类或id的情况下完成这项工作，只考虑html结构

看这里

永远不要使用重复的ID！不要在2个或更多不同的元素上放置相同的ID，而是使用类

使用attr'value'查找元素，而不是attr'id'

JQ:

---

让我知道这是否有帮助

我试图在不考虑任何类或id的情况下完成这项工作，只考虑html结构

看这里

永远不要使用重复的ID！不要在2个或更多不同的元素上放置相同的ID，而是使用类

使用attr'value'查找元素，而不是attr'id'

JQ:

---

如果短版本对您有帮助，请告诉我。它使用一个附加到文档的委托事件，该事件始终存在，因此不需要DOM就绪处理程序。相对较慢的过滤器表达式：radio仅在事件发生时运行，但不重要：

$document.on'change'，'：radio'，函数{ $this.closest'fieldset'.find'.show me'.togglethis.value==yes； }; 你是会员吗？ 对 不 请输入您的会员号码 对 不 请输入您的会员号码 对 不 请输入您的会员号码

---

短版适合你。它使用一个附加到文档的委托事件，该事件始终存在，因此不需要DOM就绪处理程序。相对较慢的过滤器表达式：radio仅在事件发生时运行，但不重要：

$document.on'change'，'：radio'，函数{ $this.closest'fieldset'.find'.show me'.togglethis.value==yes； }; 你是会员吗？ 对 不 请输入您的会员号码 对 不 请输入您的会员号码 对 不 请输入您的会员号码

---

---

从某种意义上说，使用类名而不是IdsUniversal？什么不起作用？@DaniP谢谢你，我会试试的。@RajaprabhuAravindasamy，当我说universal是一种有效的东西时，它可以赢得多个案例，具有不同的div。目前，这段代码只适用于show me divUse类名称，而不是IdsUniversal？什么不起作用？@DaniP谢谢你，我会试试看。@rajarabhuaravindasamy，当我说universal是一种可以工作的东西时，它可以赢得多个案例，使用不同的div。目前，这段代码只适用于show mediv@RaRajaprabhuAravindasamy太棒了，太完美了！非常感谢。注意：如果使用附加到文档的委托事件处理程序，则不需要DOM就绪处理程序，而且连接到大量元素会更高效/更快。@GoneCoding而不是document我们必须使用最接近的静态父级来附加委托事件处理程序以获得更高的性能。这是一个常见的误解。速度差可以忽略不计。以静态父对象为目标的通常原因是定位将响应的元素范围。无论如何，当前示例在事件注册时效率较低，因为搜索过滤器相对较慢。说你的答案仍然比其他人好。@RaRajaprabhu Aravindasamy惊人，完美！非常感谢。注意：如果使用附加到文档的委托事件处理程序，则不需要DOM就绪处理程序，而且连接到大量元素会更高效/更快。@GoneCoding而不是document我们必须使用最接近的静态父级来附加委托事件处理程序以获得更高的性能。这是一个常见的误解。速度差可以忽略不计。以静态父对象为目标的通常原因是定位将响应的元素范围。无论如何，当前示例在事件注册时效率较低，因为搜索过滤器相对较慢。说你的答案还是比别人好，谢谢！我试着走这条路。我应该选择类和属性值！。格雷特谢谢你！我试着走这条路。我应该选择类和属性值！。格雷特非常感谢你。我选择了RajaprabhuAravindasamy答案，因为它很简单。再次感谢你！非常感谢你。我选择了RajaprabhuAravindasamy答案，因为它很简单。再次感谢你！亲爱的@MihaiT，非常感谢，但我选择了RajaprabhuAravindasamy答案，因为它简单。再次感谢你！我看到了答案。这是一个非常好的。在我的回答中，正如您所看到的，我没有使用任何类或id。试图让它成为“大学”

---

sal’尽可能：亲爱的@MihaiT，非常感谢，但我选择了RajaprabhuAravindasamy答案，因为它简单。再次感谢你！我看到了答案。这是一个非常好的。在我的回答中，正如您所看到的，我没有使用任何类或id。试图使其尽可能“通用”：

$("fieldset").each(function(){
 var showme = $(this).children("div"),
     radio = $(this).children('input[type="radio"]')
 $(radio).change(function() {
   if($(this).attr('value') == 'yes') {
        $(showme).show();           
   }
   else {
        $(showme).hide();   
   }
 });
});