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> 

這是一般的方式但也許這可以幫助你爲你想要的

Answer 2

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