Question

我想要显示的跨度中有一个'X'图标，直到BOTH＃first-name和＃last-name不为空。我已经尝试了很多写在Stack上的想法，但这似乎对此没有用。

HTML

<div class="form-group">
    <label for="first-name" class="col-sm-2 control-label">Name</label>
   <div class="col-sm-4">
        <input type="text" class="form-control required" name="first-name" id="first-name" placeholder="First">
    </div>
    <div class="col-sm-5">
        <input type="text" class="form-control required" name="last-name" id="last-name" placeholder="Last">
    </div>
    <span class="glyphicon glyphicon-remove"></span>
</div>

当前的jQuery （这是我从Stack建议中尝试过的最新代码，它的工作方式和其他人一样）

  $("#last-name").bind("focus change keyup", function(){
    var emptyInputs = $(this).parent().find('input[type="text"]').filter(function() {
      return $.trim( this.value ).length > 0;
    });        
    if(emptyInputs) {
      $(this).parent().next("span").removeClass("glyphicon-ok").addClass("glyphicon-remove").fadeIn("slow");
    } else {
      $(this).parent().next("span").removeClass("glyphicon-remove").addClass("glyphicon-ok").fadeIn("slow");          
    }
  });

我在这里缺少什么？

编辑：我还希望在＃first-name有焦点，keyup等时显示'X'图标，而不是仅依靠＃last-name为显示。

Answer 1

代码中的倍数问题。首先，这一行：

 $(this).parent().find('input[type="text"]');

这样做与$(this)完全相同。它应该是：

var emptyInputs = $(this).closest('.form-group').find('input[type="text"]').filter(function() {
    return $.trim( this.value ).length > 0;
});

然后，if(emptyInputs)将始终返回true，因为emptyInputs是一个jQuery对象（真值）。它应该是：

if(emptyInputs.length)

然后事件绑定仅在last-name上。您需要添加名字：

$("#last-name, #first-name").on()

但是这条线不再适用了：

 $(this).parent().next("span")

改变你：

 $(this).siblings("span")

在此示例中缓存变量将获得良好的性能提升。

这是一个优化的代码：

var myInput = $("#first-name, #last-name").on("focus change keyup", function () {
    var fill = true
    myInput.each(function(){
        console.log($.trim(this.value).length)
        return fill = !!$.trim(this.value).length;
    })
    $(this).closest('.form-group')
    .find("span.glyphicon")
    .toggleClass("glyphicon-ok", fill)
    .toggleClass("glyphicon-remove", !fill);
});

http://jsfiddle.net/s34La/2/

Answer 2

尝试

jQuery(function ($) {
    var $inputs = $("#first-name, #last-name").on("focus change keyup", function () {
        var emptyInputs = $inputs.filter(function () {
            return $.trim(this.value).length == 0;
        });

        var $icon = $(this).closest('.form-group').find("span.glyphicon")
        if (emptyInputs.length) {
            $icon.removeClass("glyphicon-ok").addClass("glyphicon-remove");
        } else {
            $icon.removeClass("glyphicon-remove").addClass("glyphicon-ok");
        }
    });
})

演示：Fiddle

检查emptyInputs的长度，因为emptyInputs是一个永远是真正的jQuery对象
将侦听器添加到两个输入字段
因为两个字段都在同一个表单组中找到了图标元素，而不是使用next（）

Answer 3

比较简单的事情

if($("#first-name").val().length == 0 || $("#last-name").val().length == 0){
    $(this).parent().next("span").removeClass("glyphicon-ok").addClass("glyphicon-remove").fadeIn("slow");
} else {
    $(this).parent().next("span").removeClass("glyphicon-remove").addClass("glyphicon-ok").fadeIn("slow");          
}

jQuery中的多个输入ID可以更改父级中的一个跨度

3 个答案: