I am new to JS and I'm running a CMS, I have a dynamic Ids, my concern is, I would to simplify IDs to lessen JS codes by adding arrays of IDs.
Can you guys help me how to simplify this code
$x1(document).ready(function () {
//
// Id1 = #options_1_text
// Id2 = #option_2_text
// Id3 = #option_3_text
// Id(n) = so on..
$x1("#options_1_text").miniColors({
letterCase: 'uppercase',
change: function (hex, rgb) {
logData('change', hex, rgb);
}
});
$x1("#options_2_text").miniColors({
letterCase: 'uppercase',
change: function (hex, rgb) {
logData('change', hex, rgb);
}
});
$x1("#options_3_text").miniColors({
letterCase: 'uppercase',
change: function (hex, rgb) {
logData('change', hex, rgb);
}
});
// so on..
});
You're help is greatly appreciated!
Thanks!
Try this:
$x1(document).ready(function () {
var ids = [
"#options_1_text",
"#options_2_text",
"#options_3_text",
"#options_4_text",
.
.
.
.
."#options_n_text",
];
$x1.each(ids, function(i, el){
$x1(el).miniColors({
letterCase: 'uppercase',
change: function (hex, rgb) {
logData('change', hex, rgb);
}
});
});
});
If what the code does is really the same for all elements:
for (var i=1; i<4; i++) {
$x1("#options_"+i+"_text").miniColors({
letterCase: 'uppercase',
change: function(hex, rgb) {
logData('change', hex, rgb);
}
});
}
If the ids are not a simple sequence like that
var ids = [ 'id1', 'another_id', 'one_more' ];
and then loop over that array .
var str='',n=4;
for (var i=1; i<n; i++) {
str+=",#options_"+i+"_text";
}
str[0]='';
$x1(str).miniColors({
letterCase: 'uppercase',
change: function (hex, rgb) {
logData('change', hex, rgb);
}
});
The simplest way here would be to add a common class to each of these items and let jQuery do all the work for you so you could just do this:
$x1(document).ready(function () {
$x1(".options_text").miniColors({
letterCase: 'uppercase',
change: function (hex, rgb) {
logData('change', hex, rgb);
}
});
});
If you can't modify the HTML, and you can assume that the items are numbered sequentially starting with 1, you could dynamically look for the existing elements:
$x1(document).ready(function () {
var i = 1, elem;
while (elem = document.getElementById("options_" + i + "_text")) {
$x1(elem).miniColors({
letterCase: 'uppercase',
change: function (hex, rgb) {
logData('change', hex, rgb);
}
});
i++;
}
});
If it is a simple pattern and you don't know the number n of elements you can do it like this:
var n = 1;
while($('#options_'+n+'_text').length > 0)
{
$x1('#options_'+n+'_text').miniColors({
letterCase: 'uppercase',
change: function (hex, rgb) {
logData('change', hex, rgb);
}
});
n++;
}
Well, structured one here:
$x1(document)
.ready(function () {
$x1("#options_1_text")
.miniColors({
letterCase: "uppercase",
change: function (a, b) {
logData("change", a, b)
}
}), $x1("#options_2_text")
.miniColors({
letterCase: "uppercase",
change: function (a, b) {
logData("change", a, b)
}
}), $x1("#options_3_text")
.miniColors({
letterCase: "uppercase",
change: function (a, b) {
logData("change", a, b)
}
})
})
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.