切換圖標

Question

我已經寫了函數來檢查一個輸入值來確定字體真棒圖標顯示：

function xOrCheck(condition, childNumber) { 
    if (condition) { 
     $("ul.reqs li:nth-child(childNumber) i.fa").removeClass("fa-check-circle"); 
     $("ul.reqs li:nth-child(childNumber) i.fa").addClass("fa-times-circle"); 
    } else { 
     $("ul.reqs li:nth-child(childNumber) i.fa").removeClass("fa-times-circle"); 
     $("ul.reqs li:nth-child(childNumber) i.fa").addClass("fa-check-circle"); 
    } 
} 

$('input#demo').on('focus keyup',function(){ 
var value = $(this).val(); 
var firstChar = value.substring(0,1); 
xOrCheck(firstChar > 5 , 1); 
} 

下面是HTML：

<input id="demo" value="4132" /> 

<ul class="reqs"> 
    <li><i class="fa fa-check-circle"></i> Test Item</li> 
    <li><i class="fa fa-check-circle"></i> Test Item</li> 
</ul> 

感覺像有一個範圍問題，但我無法弄清楚。

Answer 1

首先，在你的HTML，加引號的值：

<input id="demo" value="4132" /> 

<ul class="reqs"> 
    <li><i class="fa fa-check-circle"></i> Test Item</li> 
    <li><i class="fa fa-check-circle"></i> Test Item</li> 
</ul> 

而在你的JS，你是不是正確使用功能參數：

function xOrCheck(condition, childNumber) { 
    if (condition) { 
     $("ul.reqs li:nth-child(" + childNumber + ") i.fa").removeClass("fa-check-circle"); 
     $("ul.reqs li:nth-child(" + childNumber + ") i.fa").addClass("fa-times-circle"); 
    } else { 
     $("ul.reqs li:nth-child(" + childNumber + ") i.fa").removeClass("fa-times-circle"); 
     $("ul.reqs li:nth-child(" + childNumber + ") i.fa").addClass("fa-check-circle"); 
    } 
} 

$('input#demo').on('focus keyup',function(){ 
var value = $(this).val(); 
var firstChar = value.substring(0,1); 
xOrCheck(firstChar > 5 , 1); 
} 

，你可以簡化一切：

function xOrCheck(condition, childNumber) { 
    var $icon = $("ul.reqs li:nth-child(" + childNumber + ") i.fa"); 
    if (condition) { 
     $icon.removeClass("fa-check-circle").addClass("fa-times-circle"); 
    } else { 
     $icon.removeClass("fa-times-circle").addClass("fa-check-circle"); 
    } 
} 

Answer 2

這是JS，而不是Perl。字符串中沒有可變插值。

function xOrCheck(condition, childNumber) { 
    if (condition) { 
     $("ul.reqs li:nth-child(" + childNumber + ") i.fa").removeClass("fa-check-circle"); 
     $("ul.reqs li:nth-child(" + childNumber + ") i.fa").addClass("fa-times-circle"); 
    } else {     "     " 
     $("ul.reqs li:nth-child(" + childNumber + ") i.fa").removeClass("fa-times-circle"); 
     $("ul.reqs li:nth-child(" + childNumber + ") i.fa").addClass("fa-check-circle"); 
    } 
} 

Answer 3

通過childNumber說法是在xOrCheck功能使用不當，因此childNumber但未得到相應的操作應該是如下

$("ul.reqs li:nth-child(" + childNumber + ")