1

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

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

这可能吗？

4

4 回答 4

2

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

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

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

http://jsfiddle.net/dDwfd/

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

于 2013-03-29T23:41:27.157 回答
0

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);
});
于 2013-03-29T23:55:32.517 回答
0

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

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 小提琴演示。

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

于 2013-03-31T13:27:35.153 回答
0

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

看来这就是您要寻找的东西：http: //jquery.com/您可以查看它的灵感来源。

于 2013-03-29T23:42:32.283 回答