Question

我编写了一个函数来检查输入值，以确定要显示的Font Awesome图标：

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 + ")

根据输入值切换图标

3 个答案: