Question

我有一个值为test的按钮，当点击该按钮时，将运行一个javascript来操作ID为test1和test2的元素。该脚本必须能够分别处理这两个元素（test1和test2）。

我正在尝试制作一个通用脚本（即不使用测试的特定值，但点击按钮的值是什么）。这样我就不需要为每个按钮制作1000个不同的脚本。只要有一个带有相应命名元素的按钮，基本上就会有一个脚本可以工作。

这可能吗？

Answer 1

我不知道你的意思是元素名称（name属性？），但querySelectorAll可以为你做很多工作。

document.querySelectorAll('[name^=' + value + ']')

可用于选择name属性的所有元素，该属性以value的内容开头。

http://jsfiddle.net/dDwfd/

正如其他人所建议的那样，jQuery可能对你很有用，因为它在内部处理了大量的迭代。 JS代码会简单得多：http://jsfiddle.net/dDwfd/1/

Answer 2

DOM操作的最通用环境是jQuery，它使用sizzle来处理选择器。

这似乎正是您所寻找的：http://jquery.com/您可以查看它的灵感来源。

Answer 3

http://jsfiddle.net/xAWUx/1/

HTML：

<button class="action-btn" data-value="test">Test Button</button>
<button class="action-btn" data-value="garage">Test Button</button>

<input name="test1" value="test1">
<input name="test2" value="test2">
<input name="garage1" value="garage1">
<input name="garage2" value="garage2">

使用jQuery：

function manipulateElement(i, el) {
    var $el = $(el);
    // $el is a jQuery-wrapped element that has a
    // name attribute that starts with the data-value
    // attribute of the clicked button
    console.log($el);
}

$('.action-btn').click(function() {
    var val = $(this).data('value');
    var elementsToManipulate = $('* [name^=' + val + ']');
    elementsToManipulate.each(manipulateElement);
});

Answer 4

我建议采用以下方法（在某些方面感觉有点过分）：

Object.prototype.filterSimilar = function(needle, prop, haystack){
    var elems = [],
        reg = new RegExp(needle);
    for (var i = 0, len = haystack.length; i<len; i++){
        if (reg.test(haystack[i].getAttribute(prop))){
            elems.push(haystack[i]);
        }
    }
    return elems;
};

Object.prototype.getSimilar = function(prop){
    var els = document.getElementsByTagName('*'),
        collection = [];
    if (this.length){
        for (var i = 0, len = this.length; i<len; i++){
            collection.push(this[i].filterSimilar(this[i].getAttribute(prop), prop, els));
        }
    }
    else {
        collection.push(this.filterSimilar(this.getAttribute(prop), prop, els));
    }
    return collection[0];
}; 

var similar1 = document.getElementsByTagName('span').getSimilar('id'),
    similar2 = document.getElementById('test').getSimilar('data-name');

console.log(similar1 + '\n' + similar2);

JS Fiddle demo

但是，仅在Win 7上的Chrome 25中进行了测试。

创建一个通用的getElementByID javascript

4 个答案: