I've got a number of input id's in a form as follows (example, not complete form) This is for a Chrome Extension so I cannot modify the form.
<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>
What I am doing is using keyup on each on the inputs, and then doing the same thing for each id like so:
$( "#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');
}
});
As you can see, there will be a lot of repetition. Is there anyway I can pass an array of id's to keyup, and then access the id in the function. Some pseudo code as an example..
$(["#data-draft-brand-name","#data-draft-name-en-us"]).keyup(function(inputID) {
$(inputID).css('border','1px solid red');
}
Here you go with a solution
$("#data-draft-brand-name, #data-draft-name-en-us").keyup(function() {
var id = $(this).attr('id');
$('#' + id).css('border','1px solid red');
});
No need to provide square brackets []
, id
should be separated by comma.
Here you go with 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>
Hope this will help you.
You can use start with selector for attribute, [name^=”value”] [ https://api.jquery.com/attribute-starts-with-selector/][1] If we need to edit your code then it should be below
$( "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');
}
});
Enjoy
To realize what you want, you should use a class
to define which input
will have a keyup
event handler.
Also, you can retreive the id of the current input
by calling attr("id")
.
So you'll have a code like this:
$(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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.