Создание обобщенного getElementByID javascript

Question

У меня есть кнопка со значением test, и при нажатии кнопки запускается javascript, который будет управлять элементами с помощью ID test1 и test2. Сценарий должен был бы обрабатывать два элемента (test1 и test2) отдельно.

Я пытаюсь создать обобщенный скрипт (т. Е. Не использовать конкретные значения теста, но независимо от того, какое значение вызывает нажатие кнопки). Таким образом, мне не нужно было бы составлять 1000 разных сценариев для каждой кнопки. В основном будет 1 скрипт, который будет работать до тех пор, пока есть кнопка с соответствующими именованными элементами.

Возможно ли это?

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, который использует шипение для обработки селекторов.

похоже, что вы ищете: 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.

Это, однако, протестировано только в Chrome 25 на Win 7.