Question

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

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

＆＃13;

$('.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');
  }

});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

喜欢这个？ http://jsfiddle.net/gb13r1b3/

我所做的就是找到'.inactive, .active'相对于点击的.switch

$('.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/

编辑3：http://jsfiddle.net/gb13r1b3/5/

Answer 2

鉴于您的问题的开头句，我假设您对替代解决方案持开放态度，因此这里是一个纯CSS，但如果可以接受，则需要对您的HTML进行一些更改<\ n <。< / p>

您需要将所有输入更改为复选框，然后在HTML中包含FontAwesome图标后立即放置标签。

然后，使用CSS，您可以在屏幕外放置复选框，并根据每个checked的{{1}}状态调整相邻标签中图标的样式。

＆＃13;

input

＆＃13;

*{box-sizing:border-box;color:#000;font-family:arial;margin:0;padding:0;}
input{
  left:-9999px;
  position:absolute;
}
label{
  height:24px;
  display:inline-block;
  margin:5px;
  overflow:hidden;
  width:27px;
  white-space:nowrap;
}
label>i::before{
  display:inline-block;
  font-size:24px;
  transform:rotate(180deg);
}
input:checked+label>i::before{
  color:#090;
  transform:rotate(0deg);
}

＆＃13;

根据输入值切换类不起作用

2 个答案: