Question

我是jQuery的新手，只是学习。我有错误的代码，工作正常！但根据jQuery的规则，这是一个很大的错误。所以这是不可能的。我不喜欢这样写代码。我也有另一个功能！

我认为我的一切都是错的。有人可以帮忙并表现出正确的方式吗？

$('input[name="username"]')
  .blur(function() {
  if ($(this).val().length >= 1) {
    $('span#username    ').addClass('input--filled')
  }
  if ($(this).val().length < 1) {
    $('span#username' +
      '').removeClass('input--filled')
  } else {
    //Nothing at the moment
  }
});

第二次输入相同的代码，但有另一个选择器

$('input[name="first_name"]')
  .blur(function() {
  if ($(this).val().length >= 1) {
    $('span#first_name    ').addClass('input--filled')
  }
  if ($(this).val().length < 1) {
    $('span#first_name').removeClass('input--filled')
  } else {
    //Nothing at the moment
  }
});

实际上我不能为其他所有5个输入写同样的内容。那是错的！我必须检查所有输入。

提前谢谢大家！

Answer 1

你可以更容易地做到这一点。

不需要其他内容，我们将使用toggleClass()。这与您的代码相同：

$('#username').blur(function() {
    $(this).toggleClass('input--filled', this.value.length >= 1);
});

我做出的改变：

首先，if / if / else无效。如果您需要该逻辑，请使用if / else if / else。此外，您不需要空的其他。 if(justIf=="noElse"){}没问题。
将span#username更改为#username。使用ID时，仅使用ID，因为这使jquery能够使用非常快的javascripts getElementById()。
将input[name="username"]更改为#username，将内部#username更改为this。在函数中，this指的是触发事件的元素（此处为模糊输入）。使用this您无需重新键入选择器和代码，因为更容易维护。
您可以使用$(this).val()代替this.value。您现在选择普通的javascript对象并使用它的属性.val()，而不是使用函数 .value。对于输入，这非常有用，因为属性总是超快的。
我使用了toggleClass()。第二个参数使您可以控制切换。如果确实如此，则添加该类。如果为false，则删除该类。我们只需要在那里登录长度等等。

如果您想在多个输入上使用此功能，请使用此代码（并记住有关this的部分）：

// Add a class to all elements you want this logic to be on.
$('.lengthChecker').blur(function() {
    $(this).toggleClass('input--filled', this.value.length >= 1);
});

Answer 2

如果<input>元素的name属性与范围的id属性之间存在一对一映射，则只需使用以下代码：

// Select all inputs with `name` attribute
$('input[name]').blur(function() {

  // Target is defined by the input's name attribute
  var target = $(this).attr('name');

  // The targeted span element is identified by ID
  var $targetedSpan = $('#' + target);

  if ($(this).val().length >= 1) {
    $targetedSpan.addClass('input--filled')
  }

  if ($(this).val().length < 1) {
    $targetedSpan.removeClass('input--filled')
  } else {
    //Nothing at the moment
  }
});

您的代码的一些提示：

您不需要使用span#id，因为ID在文档中是唯一的。使用#id选择器绰绰有余
你应该缓存你的span选择器，这样我们就不必在想要添加/删除class时一直查询DOM。这就是为什么我已将目标范围存储在$targetedSpan变量中，而不是重复使用$('#' + target)两次

Answer 3

您不需要第三个conditional阻止。

else {
   //Nothing at the moment
}

因为第一个two涵盖了所有个案。

$('input').blur(function() {
  let name=$(this).attr('name');
  if ($(this).val().length >= 1) {
    $('span#'+name).addClass('input--filled')
  }
  if ($(this).val().length < 1) {
    $('span#'+name).removeClass('input--filled')
  }
});

Answer 4

您可以尝试这样的事情：

$('input[type="text"]')
  .blur(function() {
  var $this = $(this);
  if ($this.val().length >= 1) {
    $('span#' + $this.attr("name")).addClass('input--filled')
  }
  if ($this.val().length < 1) {
    $('span#'+ $this.attr("name")).removeClass('input--filled')
  } else {
    //Nothing at the moment
  }
});

Answer 5

欢迎使用StackOverflow！您可以创建一个包装代码的函数，但不是使用固定值，而是使用变量来了解您正在准备的字段。

这是一个例子。我使用toggleClass代替addClass和removeClass，因为您可以为第二个参数编写条件。

// I guess the easiest way is to add a certain class
// to your input field instead of checking for a specific name.
$( 'input.checkValue' ).blur( checkInputValue );

function checkInputValue( event ) {
  // We just use the event to get the fields name
  // and we use toggleClass to get rid of the if-conditions
  //
  // When ( event.target.value.length > 0 ) is true, .input--filled
  // is going to be added, otherwise removed.
  $( 'span#' + event.target.name )
    .toggleClass( 'input--filled', event.target.value.length > 0 );
}

span {
  display: inline-block;
  background: #c41e15;
  width: 20px;
  height: 20px;
}

.input--filled {
  background: #61c415;
}

/* Just some style for the field row */
.row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 2px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="row">
  <input name="username" class="checkValue" />
  <span id="username"></span>
</div>

<div class="row">
  <input name="someOtherField" class="checkValue" />
  <span id="someOtherField"></span>
</div>

Answer 6

我修改了你的脚本并缩短了它。您可以在查询选择中使用多个选择器，以CarInterface分隔。我使用一种名为“return ($this->one)();”的技术来相应地切换类。

这是一个工作小提琴：

comma

ternary operator

$('input[name="username"], input[name="first_name"]').blur(function() {
	var span = $('#' + $(this).prop('name'));
	span.removeClass('input--filled').addClass(($(this).val().length >= 1) ? 'input--filled' : '');
});

jQuery .each（）里面有模糊功能

6 个答案:

你可以更容易地做到这一点。