Question

抱歉这个坏主题..

我试图编写一个代码，当我在文本输入中输入超过3个字符时，我想要一个复选框变为绿色;我得到了很多这些复选框，似乎没有按照我的意愿去做。

希望有人能有更好的答案。

这是我的HTML代码：

<li class="input-group">
  <span class="input-group-addon PaddingFix" id="basic-addon4">
    <strong>Username</strong>
  </span>
  <input type="text" autocomplete="off" name="username" placeholder="Username.">
  <span class="input-group-addon PaddingFix tooltipFix" data-placement="right" title="Fyll i ditt användarnamn.">
    <span class="fa fa-check-square-o"></span>
  </span>
</li>

就像我说的那样，当输入

中有超过3个字符时，我希望复选框的颜色发生变化

这是我的jQuery代码：

$("input[type=text]").keyup(function() { 
    parent = $(this).parent().attr("class");

    if ($(this).val().length >= 3) { 
        $(".fa-check-square-o", parent).css({"color": "#08c004"});
    }
});

这只是一个输入，我还有12个输入，这就是为什么我尝试使用＆＃34; parent＆＃34;作为选择者;所以我只改变那个＆＃34;输入组的颜色。＆＃34;

Answer 1

我建议将parent定义为DOM元素本身，而不是元素的类属性。

＆＃13;

$("input[type=text]").keyup(function() {
  parent = $(this).parent();

  if ($(this).val().length >= 3) {
    $(".fa-check-square-o", parent).css({
      "color": "#08c004"
    });
  }

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="input-group"><span class="input-group-addon PaddingFix" id="basic-addon4"><strong>Username</strong></span>
  <input type="text" autocomplete="off" name="username" placeholder="Username."><span class="input-group-addon PaddingFix tooltipFix" data-placement="right" title="Fyll i ditt användarnamn."><span class="fa fa-check-square-o">check</span></span>
</li>

＆＃13;

使用selector context时，＆＃34;上下文＆＃34;定义如下：

jQuery（selector [，context]）

<强>上下文
  类型：元素或jQuery
  要用作上下文的DOM元素，文档或jQuery

http://api.jquery.com/jquery/#jQuery1

Answer 2

用以下代码替换你的JS：

if ($(this).val().length >= 3) { 
    $("."+parent+" .fa-check-square-o").css({"color": "#08c004"});
}

Answer 3

您在选择器中的类父级之前缺少点（.），因此您必须更改：

$(".fa-check-square-o", parent).css({"color": "#08c004"});

致：

$(".fa-check-square-o, ."+parent).css({"color": "#08c004"});

它会起作用。

希望这有帮助。

更改范围的颜色（parent / this /？）

3 个答案: