javascript - jQuery 开关不设置默认图标但显示两者

Question

我有这个开关，点击它会将下一个隐藏值更改为 0 或 1，但我需要它根据加载的值设置正确的图标，但无法解决。

// Enable / Disable feature columns
$('[id^=PC_Row]').each(function() {
  var $featureStatuses = $(this);
  if ($featureStatuses == "1") {
    $featureStatuses.prev('.inactive').hide();
  } else {
    $featureStatuses.prev('.active').hide();
  }
});

$('.switch').click(function() {
  $(this).find('.inactive, .active').toggle();
  var featureStatus = $(this).find('[id^=PC_Row]').val();
  //console.log(featureStatus);
  if (featureStatus == "1") {
    $(this).find('[id^=PC_Row]').val('0');
  } else {
    $(this).find('[id^=PC_Row]').val('1');
  }

});

    .switch-wrapper {
      text-align: center;
    }
    .switch {
      font-size: 1.5em;
      margin: 0 auto;
      position: relative;
      height: 50px;
      width: 25px;
    }
    .switch i {
      position: absolute;
      top: 14px;
      left: 0;
    }
    .switch .active {
      color: green;
    }

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

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

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

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

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

Answer 1

也许你可以简化你的代码，比如 Javascript 代码:

    $('.switch').click(function(){
      var i = $(this).find('i');

      i.toggleClass('fa-rotate-180');

      $(this).find('input[type=hidden]').val(i.hasClass('fa-rotate-180')?'1':'0');
    });

对于 HTML:

<a href="#" class="switch">
  <i class="fa fa-toggle-on active"></i>
  <input type="hidden" name="name" value="0">
</a>

这是一般的做法，但也许这可以帮助你实现你想要的