Вопрос по javascript, jquery, html – Селектор идентификатора jQuery работает только для первого элемента

17

У меня есть 3 кнопки с одинаковым идентификатором, мне нужно получить значение каждой кнопки, когда он нажимается.

<button id="xyz" type="button" class="btn btn-primary" value="1">XYZ1</button>
<button id="xyz" type="button" class="btn btn-primary" value="2">XYZ2</button>
<button id="xyz" type="button" class="btn btn-primary" value="3">XYZ3</button>

Вот мой токjQuery сценарий:

$("#xyz").click(function(){
      var xyz = $(this).val();
      alert(xyz);
});

Но это работает только для первой кнопки, нажатие на другие кнопки игнорируется.

Вы не можете иметь тот же идентификатор, так как идентификатор уникален, используйте класс вместо идентификатора, это решит ваш случай Kunal Vashist
Этот вопрос задают здесь очень много раз, поэтому я решил дать емуbig подтяжка лица и написал полный описанный ответ. Надеюсь, это поможет будущим посетителям. gdoron

Ваш Ответ

6   ответов
0

потому что идентификатор уникален на странице HTML. Измените его на класс или другое имя атрибута.

$('attributename').click(function(){ alert($(this).attr(attributename))});
1

если у вас есть несколько элементов с одинаковым идентификатором.

 $("button#xyz").click(function(){
  var xyz = $(this).val();
  alert(xyz);
 });

ты можешь проверитьВОТ

это должен быть правильный ответ!
1

$('button#xyz') селектор вместо этого будет работать. Это взлом, но это все еще недействительный HTML.

6

я каждого документа. Так как ваш HTML неверен на данный момент, некоторые браузеры выбирают первый, а некоторые последний встречающийся элемент с этим идентификатором.

Изменение идентификаторов для имен было бы хорошим шагом.

Тогда используйте$('button[name="xyz"]').click(function(){

++ 1 тебе тоже!
Фактически, если вы просто используете $ ('button [id = & quot; xyz & quot;] "), он будет работать для всех кнопок с таким идентификатором (как и требовался исходный вопрос). Проверено в Chrome.
0

вы можете получить все элементы с одинаковым идентификатором, используяатрибут равен селектору:

$('[id="xyz"]')

Или это, чтобы получить только кнопки с идентификатором XYZ:

$('button[id="xyz"]')

Или div с идентификатором xyz:

$('div[id="xyz"]')

и т.п.

В качестве альтернативы вы можете использовать& quot; Атрибут содержит селектор & quot; чтобы получить все элементы с идентификаторами, которые содержат & quot; xyz & quot ;:

$('[id*="xyz"]')

Конечно, это означает, что все элементы с идентификатором частично содержат «xyz». будет выбран этим.

Возможно, $ ('[id = & quot; xyz & quot;] ") недокументировано (кстати, приятно), но атрибут, содержащий селектор, задокументирован, см. Выше: P.
На самом деле в прошлый раз, когда я проверил, вы можете даже использовать$('[id="xyz"]') и это будет работать. Но, тем не менее, это недействительный HTML, и его следует исправить независимо от недокументированных хаков.
41

У вас неверный HTML, у вас не может быть более одного элемента на странице с одинаковымid.

Цитирование спецификации:

7.5.2 Element identifiers: the id and class attributes

id = name [CS]
This attribute assigns a name to an element. This name must be unique in a document.

Solution: меняться отid вclass,

<button type="button" class="btn btn-primary xyz" value="1">XYZ1</button>
<button type="button" class="btn btn-primary xyz" value="2">XYZ2</button>
<button type="button" class="btn btn-primary xyz" value="3">XYZ3</button>

ИjQuery code:

$(".xyz").click(function(){
    alert(this.value);
    // No need for jQuery :$(this).val() to get the value of the input.
});

But it works only for the first button

JQuery#id селектордокументы:

Each id value must be used only once within a document. If more than one element has been assigned the same ID, queries that use that ID will only select the first matched element in the DOM. This behavior should not be relied on, however; a document with more than one element using the same ID is invalid.

Если вы посмотрите на источник jQuery, вы можете увидеть, когда вы звоните$ с идентификатором selecor- ($("#id")), JQuery вызывает нативный JavaScriptdocument.getElementById функция:

// HANDLE: $("#id")
} else {
    elem = document.getElementById( match[2] );
}

Хотя вспекуляция изdocument.getElementById они не упоминали, что оно должно возвращать первое значение, именно так большинство (возможно, все?) браузеров реализовали его.

DEMO

Я изменил свой класс на: class = & quot; btn btn-primary xyz & quot; Спасибо за это, это действительно полезно Mafaik Mafaik
Спасибо, я попробовал это, и это работает, но с alert (this) .val (); Теперь у меня есть проблема с моим классом кнопки CSS, как вы видите, есть два класса в теге кнопки Mafaik
И это домой бежать с полным ответом! ++ 1
@gdoron вы получили это innit: P ++ отstack overflow +1 отme брув ++ 1: P
Выглядит хорошо для меня :) Может быть, вы можете просто добавить одно предложение в отношении простых методов DOM, чтобы мы могли использовать его в качестве канонического ответа для этого случая (возможно, придется немного подправить вопрос, но я пишу со своего телефона). Не нужно делать это вики-сообществом, вы заслуживаете представителя :)

Похожие вопросы