[英]How to Simplify Javascript Dynamic IDs?
我是JS的新手,正在運行CMS,我有一個動態ID,我擔心的是,我將通過添加ID數組來簡化ID以減少JS代碼。
你們能幫我簡化代碼嗎
$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..
});
非常感謝您的幫助!
謝謝!
嘗試這個:
$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);
}
});
});
});
如果代碼對所有元素所做的確實相同:
for (var i=1; i<4; i++) {
$x1("#options_"+i+"_text").miniColors({
letterCase: 'uppercase',
change: function(hex, rgb) {
logData('change', hex, rgb);
}
});
}
如果id不是像這樣的簡單序列
var ids = [ 'id1', 'another_id', 'one_more' ];
然后遍歷該數組 。
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);
}
});
這里最簡單的方法是為每個項目添加一個通用類,並讓jQuery為您完成所有工作,因此您可以這樣做:
$x1(document).ready(function () {
$x1(".options_text").miniColors({
letterCase: 'uppercase',
change: function (hex, rgb) {
logData('change', hex, rgb);
}
});
});
如果您無法修改HTML,並且可以假定項目從1開始按順序編號,則可以動態查找現有元素:
$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++;
}
});
如果這是一個簡單的模式,並且您不知道元素的數量n,則可以這樣操作:
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++;
}
好吧,這里有一個結構:
$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)
}
})
})
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.