javascript - 基于输入值的切换类不起作用

Question

这在负载切换值时似乎不起作用。

最初也设法让这个工作用于 1 个开关，但现在页面上有多个开关，所以切换将它们全部移动，我将如何调整以便为每个开关完成？

$('.switch .inactive').hide();

var switchStatus = $('.switch').next('input').val();

// 1 = disable
// 0 = enabled
if (switchStatus == '1') {
  $('.switch .active').hide();
} else {
  $('.switch .active').show();
}

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

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

});

.panel-heading {
  cursor: pointer;
  margin: 0;
}
.panel-heading .status {
  float: right;
}
.panel-collapse {
  display: none;
}
.panel-collapse.open {
  display: block;
}
.panel-body .col-md-6.left {
  padding-left: 0;
}
.panel-body .col-md-6.right {
  padding-right: 0;
}
.panel-body .redactor-editor {
  min-height: 100px !important;
}
.switch {
  float: left;
  font-size: 1.5em;
  margin: -4px 10px 0 -5px;
}
.switch .active {
  color: green;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<div class="switch ProductFeatures_TP_Status">
  <i class="fa fa-toggle-on active"></i>
  <i class="fa fa-toggle-on fa-rotate-180 inactive"></i>
  <input type="hidden" id="ProductFeatures_TP_Status" name="ProductFeatures_TP_Status" value="0">
</div>

<div class="switch ProductFeatures_TP_Status">
  <i class="fa fa-toggle-on active"></i>
  <i class="fa fa-toggle-on fa-rotate-180 inactive"></i>
  <input type="hidden" id="ProductFeatures_TP_Status1" name="ProductFeatures_TP_Status1" value="1">
</div>

<div class="switch ProductFeatures_TP_Status">
  <i class="fa fa-toggle-on active"></i>
  <i class="fa fa-toggle-on fa-rotate-180 inactive"></i>
  <input type="hidden" id="ProductFeatures_TP_Status2" name="ProductFeatures_TP_Status2" value="1">
</div>

Answer 1

像这样？ http://jsfiddle.net/gb13r1b3/

我所做的只是找到与点击的.switch相关的'.inactive, .active'

$('.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_TP_Status] 查找以 ProductFeatures_TP_Status 开头的任何 id。单击 .switch 后，只有一个以 ProductFeatures 开头的 ID...

EDIT-2:http://jsfiddle.net/gb13r1b3/1/

EDIT-3:http://jsfiddle.net/gb13r1b3/5/