Question

我在表单中有一些输入ID如下（例如，不是完整表格）这是针对Chrome扩展程序，因此我无法修改表单。

<form>
  <input id="data-draft-brand-name" />
  <input id="data-draft-name-en-us" />
  <input id="data-draft-bullet-points-bullet1-en-us" />
  <input id="data-draft-bullet-points-bullet2-en-us" />
  <input id="data-draft-description-en-us" />
</form>

我正在做的是在输入上使用keyup，然后为每个id做同样的事情，如下所示：

$( "#data-draft-description-en-us" ).keyup(function() {
  var currentVal = $(this).val();
  currentVal = currentVal.toLowerCase();

  var currentLength = currentVal.length;
  currentLength = 2000 - currentLength;

  $('#description-count').text(`${currentLength} characters left`);

  if(currentVal.indexOf('word') !== -1) {
    $('#data-draft-description-en-us').css('border','1px solid red');
    $('#data-draft-description-en-us').css('background','red');
  } else {
    $('#data-draft-description-en-us').css('border','1px solid #a6a6a6');
    $('#data-draft-description-en-us').css('background','none');
  }
});

正如你所看到的，会有很多重复。无论如何我可以将一个id数组传递给keyup，然后访问函数中的id。一些伪代码作为例子..

$(["#data-draft-brand-name","#data-draft-name-en-us"]).keyup(function(inputID) {
  $(inputID).css('border','1px solid red');
}

Answer 1

您可以使用解决方案

$("#data-draft-brand-name, #data-draft-name-en-us").keyup(function() {
  var id = $(this).attr('id');
  $('#' + id).css('border','1px solid red');
});

无需提供方括号[]，id应以逗号分隔。

您可以使用jsfiddle https://jsfiddle.net/tjkah0ck/2/

$( "#data-draft-brand-name, #data-draft-name-en-us" ).keyup(function() {
    var currentVal = $(this).val();
        currentVal = currentVal.toLowerCase();
    console.log(currentVal);
    var currentLength = currentVal.length;
        currentLength = 2000 - currentLength;

    $('#description-count').text(`${currentLength} characters left`);

    if(currentVal.indexOf('word') !== -1) {
        $('#data-draft-description-en-us').css('border','1px solid red');
        $('#data-draft-description-en-us').css('background','red');
    } else {
        $('#data-draft-description-en-us').css('border','1px solid #a6a6a6');
        $('#data-draft-description-en-us').css('background','none');
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
   <input id="data-draft-brand-name"/>
   <input id="data-draft-name-en-us"/>
   <input id="data-draft-bullet-points-bullet1-en-us" />
   <input id="data-draft-bullet-points-bullet2-en-us" />
   <input id="data-draft-description-en-us" />
</form>

希望这会对你有所帮助。

Answer 2

你可以使用start with selector作为属性，[name ^ =“value”] [https://api.jquery.com/attribute-starts-with-selector/][1] 如果我们需要编辑您的代码，那么它应该在

之下

$( "div[id^='data-draft-'" ).keyup(function() {
var currentInput = $(this);
var currentVal = $(this).val();
    currentVal = currentVal.toLowerCase();
console.log(currentVal);
var currentLength = currentVal.length;
    currentLength = 2000 - currentLength;

$('#description-count').text(`${currentLength} characters left`);

if(currentVal.indexOf('word') !== -1) {
    currentInput.css('border','1px solid red');
    currentInput.css('background','red');
} else {
    currentInput.css('border','1px solid #a6a6a6');
    currentInput.css('background','none');
}
});

享受

Answer 3

要实现您的目标，您应该使用class来定义哪个input将拥有keyup事件处理程序。

此外，您可以通过调用input来检索当前attr("id")的ID。

所以你会得到这样的代码：

$(document).ready(function(){

  $(".keupinput").keyup(function(event) {
    var inputid = $(this).attr("id");
    console.log("I'm the " + inputid + " input.");
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
   <input class="keupinput" id="data-draft-brand-name" />
   <input class="keupinput" id="data-draft-name-en-us" />
   <input class="keupinput" id="data-draft-bullet-points-bullet1-en-us" />
   <input class="keupinput" id="data-draft-bullet-points-bullet2-en-us" />
   <input class="keupinput" id="data-draft-description-en-us" />
</form>

jQuery keyup - 多个输入和传递ID名称？

3 个答案: