JS применяется только к элементу который в html выше. Как сделать ко всем ?

Question

[Legioner911]

Здравствуйте. Сразу скажу что в js я слаб.
У меня несколько кнопок в списке, нужно что бы при нажатии на каждую открывалось модальное окно с формой(форма она и та же). Погуглил, нашел готовое решение, скачал файлы, подключил, всё работает. Только одна проблема. JS применяется только к кнопке которая в html выше.
Вот собственно кнопки

<input type="button" id="btn59" value="подробнее"/>
<input type="button" id="btn59" value="подробнее"/>

Заранее спасибо!

Answer 1

[Alexander Sydorenko]

Нельзя делать два одинаковых id!

<input type="button" class="btn59" value="подробнее"/>
<input type="button" class="btn59" value="подробнее"/>

и тогда в
$('.btn59').someFunction(...);

Будет Вам счастье. id по спецификации должен быть уникальным, и находя первый элемент jQuery перестает искать еще, так как не должно быть больше одного id.

Comments

[Сергей Протько]

ну на самом деле и по классу селектор тоже делать не стоит. Могу вам показать что бывает когда используют селекторы по классам конкретной кнопки:

$('a.send-form2').click(function () {
    $('.ready-to-work.formfooter form#quoteForm1').submit();
    return false;
  });

  $('.l_p_button').click(function () {
    $('form#quoteForm2').submit();
    return false;
  });

  $('a.send-form').click(function () {
    $('div.content form').submit();
    return false;
  });

  $('div.hs-button').click(function () {
    $('form.hs-form').submit();
    return false;
  });
  $('.iphoneform .submit input').click(function () {
    $('form.iphoneform').submit();
    return false;
  });
  $('.mas_form button').click(function () {
    $('#quoteFormSam').submit();
    return false;
  });
  $('.mas_form_req button').click(function () {
    $('#quoteFormReq').submit();
    return false;
  });

Это реальный код одного легаси проекта. И ты потом сидишь такой грустный и ищешь по всем шаблонам где это говно используется. А с data-* атрибутами можно было бы так:

$('[data-submit]').on('click', function () {
    $(this.dataset.submit).submit();
    return false;
})

[Alexander Sydorenko]

Сергей Протько: Согласен, data- идеальное решение, для примера Выше. Но задающий вопрос не уточнял, надо ему в дальнейшем разделять кнопки по логике, или нет.. :) data- до этого, для таких целей, не использовал (теперь начну :) ) просто вводил дополнительный класс на сущности с одинаковым функционалом, без стилей на этот класс, то-есть он был именно для js, data- в таком случае использовал для передачи параметров.. а с data- в качестве селектора, действительно, как то даже универсальнее и гибче получится..

[Legioner911]

По поводу первого ответа не получилось найти в файлах js id с названием btn59, что бы изменить его на класс. Вообще такого слова нет. Вот ссылка на файлы js rghost(точка)ru/59228219
Может кто то выручит :( Вообще не врубаюсь. Помогите гуру JavaScript....

[Сергей Протько]

Alexander Sydorenko: классы нужны для стилей. Можно завязывать JS на классы когда это удобно, скажем когда у вас от какого-то класса по логике поведение должно меняться. Модификатор какой или чего еще. Но data-* атрибуты обычно намного более удобны. Мало ли потом нужно будет конфигурацию заводить, или эта же логика должна будет применяться к другому элементу... А для любителей микрооптимизаций - селекторы по атрибутам работают быстрее чем селекторы по классу.

[Александр Маджугин]

Сергей Протько: селектор по атрибуту отличному от класса (если не брать в расчет id) будет работать гораздо медленее. С другой стороны - согласен селектор для класса в большинсте случаев не самое лучшее решение.

[Александр Маджугин]

Сергей Протько: > А для любителей микрооптимизаций - селекторы по атрибутам работают быстрее чем селекторы по классу.
С чего бы это?! O_o
Селектор по классам - нативный для браузера. Селектор по другим атрибутам - костыль jquery.

[Сергей Протько]

Suntechnic: Ну вопервых jQuery будет пытаться использовать querySelector если не сможет использовать getElementBy* . Ну и по классам будет быстрее выборка только для простых селекторов, типа ".btn" так как для таких Query использует getElementByClassName. А для ".btn.submit" например ситуация уже будет другой:
jsperf.com/id-vs-class-vs-tag-selectors/332

Хотя в моем тесте селектор по классу всеравно быстрее... все видимо сильно зависит от вложенности и т.д. Словом... пункт по поводу оптимизации можно отбросить - единственное что - при использовании data-* атрибутов селекторы у нас всегда простые, без вложенностей и т.д.

[Александр Маджугин]

Сергей Протько: от вложенности и от порядка.
Там такая фишка - допустим есть у тебя класс у ссылки ajax-link и допустим одну ссылку, вложенную в div с классом super-link нужно выделить...
И вот тут большинство напишет селектор '.super-link .ajax-link' и сразу станет плохо, потому, что сначала будут найдены все ссылки с ajax-link, а потом начнется проверка у кого из них родитель super-link вверх до корня DOM...
Я сам долго этого не знал и иногда недоумевал почему отсев по классам такой медленный.

[Сергей Протько]

Suntechnic: я вкурсе как работают выборки по селекторам, потому и думал что выборка по атрибутам (нативная) всегда будет быстрее так как выше специфичность и не нужно траверсить дерево вверх... но как-то не удалось.

Answer 2

[A K]

Смотрю ответ выше: подключать jQ чтоб обработать клик по кнопке, куда катится Тостер (при том что в тегах нет jq)
По теме:

document.getElementsByTagName('input')[1].onclick=function(){
    alert('1');
}

Comments

[Сергей Протько]

Если уж рекомендуете ванильный JS то давайте хоть без этих атавизмов:

[].forEach.call(document.querySelectorAll('[data-my-btn]', function (btn) {
    btn.addEventListener('click', function () {}, true);
});

[Сергей Протько]

Сергей Протько: и опять же - jQuery скорее всего понадобится еще для чего-нибудь. Если речь идет не о мобильных браузерах и есть поддержка старых браузеров - то jQuery все же удобнее будет.

[A K]

Сергей Протько: ок, но не вижу дата у тс

[Сергей Протько]

Symphony: это я так ненавясчиво форсю идею использование data-* атрибутов для селекторов в JS.

[A K]

Сергей Протько: ненавязчиво приму к сведению

Answer 3

[Legioner911]

По поводу первого ответа не получилось найти в файлах js id с названием btn59, что бы изменить его на класс. Вообще такого слова нет. Вот ссылка на файлы js rghost(точка)ru/59228219
Может кто то выручит :( Вообще не врубаюсь. Помогите гуру JavaScript....

Comments

[Alexander Sydorenko]

В том архиве что Вы выложили нет обработчика вашего кода для кнопок. Либо не все файлы выслали, либо обработчик включен инлайном в html файл с кнопками.

[Legioner911]

Alexander Sydorenko: Извиняюсь, в таком случае я выкладываю ссылку полностью на архив из которого я брал файлы и настройки. Вот он rghost (точка) ru/59233782

Это уже спортивный интерес, неужели нужно искать другой способ для реализации данной задачи.

[Alexander Sydorenko]

Legioner911: как я и говорил в html файле

/*Показываем блок*/
$("#btn59").click(function(){
$('#outward').css('display','block');/*показываем весь блок (внешний и внутренний)*/
var halfW=$("#inside").width()/2;/*половина ширины блока #modalW_inside*/

var leftWinside=$(window).width()/2-halfW; /*переменная для центрирования блока #inside*/ 
$("#inside").css('left',leftWinside);/* центрируем внутренний блок*/
$("#inside").css('top','200');
})

изменить на $(".btn59"), после того как поправите код кнопок, так как написано в моем ответе выше.

[Legioner911]

Alexander Sydorenko: Ура! Спасибо огромное Alexander. Получилось. Вы просто бог js !! Ещё раз огромнейшее спасибо !!)

[Alexander Sydorenko]

Legioner911: я очень далек от Бога js.. но рад что получилось :)