jQuery开关没有设置默认图标，但显示两个

我有这个开关，当点击将改变下一个隐藏值为0或1，但我需要它设置正确的图标基于加载的价值，但不能解决。jQuery开关没有设置默认图标，但显示两个

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

来源

2015-12-08 James

我可以建议你不'JavaScript'都更好的解决方案？ –

当然，我有很多PHP控件的东西，但一定要请建议，原因使用JS和更好的支持跨浏览器。 – James

，也许你可以简化你的代码，像这样的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>

这是一般的方式但也许这可以帮助你为你想要的

来源

2015-12-08 15:08:13

它将如何设置不活动的类，因为这是什么改变颜色？生病在一秒钟内尝试。 – James

切换良好，无论如何切换活动和不活动取决于状态1或0像旋转？ – James

哦，对了，我错过了杰杰。你可以按顺序添加更多类到toggleClass函数，如下所示：i.toggleClass（'active fa-rotate-180 inactive'）; –

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

 
input { 
 
    display:none; 
 
} 
 

 
input:not(:checked) ~ .active, 
 
input:checked ~ .inactive { 
 
    display:none; 
 
} 
 

 
input:checked ~ .inactive, 
 
input:not(:checked) ~ .active { 
 
    display:none; 
 
}

<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"> 
 
    <label> 
 
     <input type="checkbox" name="PC_Row_1_Feature_1_Enabled" checked="checked" value="1" /> 
 
     <i class="fa fa-toggle-on active"></i> 
 
     <i class="fa fa-toggle-on fa-rotate-180 inactive"></i> 
 
    </label> 
 
    </div> 
 
</div> 
 

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

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

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

来源

2015-12-08 15:10:48

jQuery开关没有设置默认图标，但显示两个

回答

相关问题