Javascript 基于输入值的开关类不工作

当切换负载上的值时，这似乎不起作用

最初也设法让这一工作为1开关，但现在有多个在页面上，所以切换移动他们所有，我该如何调整，使其为每一个完成

$（'.switch.inactive'）.hide（）；
var switchStatus=$（'.switch'）.next（'input'）.val（）；
//1=禁用
//0=已启用
如果（开关状态='1'）{
$（'.switch.active'）.hide（）；
}否则{
$（'.switch.active'）.show（）；
}
$（'.switch'）。单击（函数（）{
$（'.inactive，.active'）.toggle（）；
var featureStatus=$（this）.find（'#ProductFeatures_TP_Status'）.val（）；
//console.log（特性状态）；
如果（featureStatus==“1”）{
$（this）.find（'#ProductFeatures_TP_Status'）.val（'0'）；
}否则{
$（this）.find（'#ProductFeatures_TP_Status'）.val（'1'）；
}
});
。面板标题{
光标：指针；
保证金：0；
}
.小组标题.状况{
浮动：对；
}
.面板倒塌{
显示：无；
}
.panel-collapse.open{
显示：块；
}
.面板主体.col-md-6.左侧{
左侧填充：0；
}
.面板主体。col-md-6.右侧{
右边填充：0；
}
.panel body.redactor编辑器{
最小高度：100px！重要；
}
.开关{
浮动：左；
字号：1.5em；
保证金：-4px10px0-5px；
}
.开关。激活{
颜色：绿色；
}

像这样吗

我所做的就是找到
”。相对于单击的
。开关，

$('.switch').click(function() {
  $(this).find('.inactive, .active').toggle();

  var featureStatus = $(this).find('[id^=ProductFeatures_TP_Status]').val();
    console.log(featureStatus);
  //console.log(featureStatus);
  if (featureStatus == "1") {
    $(this).find('[id^=ProductFeatures_TP_Status]').val('0');
  } else {
    $(this).find('[id^=ProductFeatures_TP_Status]').val('1');
  }

编辑：语法
[id^=ProductFeatures\u TP\u Status]
查找任何以ProductFeatures\u TP\u Status开头的id。单击
.switch
后，只有一个id以ProductFeatures开头

编辑-2：

编辑-3:
鉴于你问题的开头，我假设你对其他解决方案持开放态度，因此这里有一个纯CSS解决方案供你选择，但如果可以接受的话，它需要对HTML进行一些更改

您需要将所有输入更改为复选框，然后在HTML中立即将标签放在它们之后，其中包含您的图标

然后，使用CSS将复选框置于屏幕外，并根据每个
输入的
状态调整相邻标签中图标的样式


*{框大小：边框框；颜色：#000；字体系列：arial；边距：0；填充：0；}
输入{
左：-9999px；
位置：绝对位置；
}
标签{
高度：24px；
显示：内联块；
保证金：5px；
溢出：隐藏；
宽度：27px；
空白：nowrap；
}
标签>i：：之前{
显示：内联块；
字体大小：24px；
变换：旋转（180度）；
}
输入：选中+标签>i:：之前{
颜色：#090；
变换：旋转（0度）；
}

标签1
标签2
标签3
我会帮你的，但请把它放在一个JSFIDDLE中谢谢Chris，给你：是的，这是其中一个已修复的，但是我试图添加的逻辑，根据输入值更改状态，但不起作用。。。你知道吗？再次感谢您的帮助。啊，对不起，我的错，我刚刚添加了状态1和状态2。ID实际上会像ProductFeatures\u TP\u Status、ProductFeatures\u PP\u Status和ProductFeatures\u DP\u Status一样发生变化-仍然可以使用它们吗？再次感谢您的帮助，mate-此外，页面上还有许多其他元素以该元素开头，因此我想它们必须位于.switch容器中。请将通配符选择器更改为公共起始字符串。因此，在您的情况下，将id^=ProductFeatures\u TP\u状态更改为id^=ProductFeatures。只要你的id有共同的起始字符串，那么你就可以可靠地使用通配符选择器。啊，不用担心，我破解了它。现在加载页面时，只需在值上设置类基址。。有什么想法吗？那我就完蛋了哈哈谢谢你又让我为这个工作了哈？检查我的最新小提琴。顺便说一句，一旦你隐藏了一个元素，你就不能再和它交互了。