如何简化Javascript动态ID
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);
}
});
});
});
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);
}
});
如果代码对所有元素的作用都是一样的:
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' ];
然后在该阵列上循环。
如果这是一个简单的模式,并且你不知道元素的数量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++;
}
这里最简单的方法是为每个项目添加一个公共类,并让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++;
}
});
这里是结构化的:
$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)
}
})
})
相关文章:
- 根据选项卡内部的文本链接中的哈希ID动态选择jqueryUI选项卡
- 在iframe代码中动态插入子id
- 如何为动态创建的元素分配唯一的id-Javascript
- 使用getElementById设置动态ID的输入字段的样式
- Php,Javascript-动态表单id's和动态验证
- 动态添加id's到输入字段
- Javascript:获取具有动态id的文本框值
- 如何将value和id动态添加到html下拉选项标记中
- Jquery通过id动态选择对象使用字符串
- 根据ID动态创建元素(Jquery)
- 如何最好地搜索基于特定元素的id动态生成的自定义列表?
- 使用jQuery通过ID动态修改元素属性
- Jquery getjson为每个id动态点击时- ruby on rails
- 通过id动态访问对象数据
- 在d3.js中使用县Id动态地在地图中插入圆圈
- 使用jQuery将ID动态分配给当前表行tr
- 使用Jquery根据可拖放对象的ID动态更改图像的src
- 如何将id动态添加到每个蓝色圆圈中
- 如何通过id动态选择JQuery元素
- 如何设置ID动态创建的文本框在JavaScript