Jquery: Как автоматически применить window.location.hash к тому же номеру, что и в идентификаторе кнопки? - PullRequest
Новая
       28

Jquery: Как автоматически применить window.location.hash к тому же номеру, что и в идентификаторе кнопки?

0 голосов
/ 01 сентября 2018

У меня есть веб-страница минимум с 300 кнопками.

Это урезанная версия моих кнопок для этого вопроса. 

$(".button2").click( function() {
ajaxFunction(gallery[2]);    
});

$(".button3").click( function() {
ajaxFunction(gallery[3]);

});

и т. Д. И т. П.

Мне нужно выяснить способ, которым, когда, скажем, нажата кнопка # button2, она автоматически применяется: window.location.hash = '# gallery2'. Если щелкнуть по кнопке # button3, она добавит window.location.hash = '# gallery3' и т. Д. И т. Д.

Есть несколько сотен кнопок, поэтому я стараюсь избегать ручного ввода здесь. Lol.

Есть ли способ получить число в конце кнопки «#button [число]» и добавить его в window.location.hash = '#gallery [это число]'

Надеюсь, я объяснил это ясно.

Спасибо

Ответы [ 3 ]

0 голосов
/ 01 сентября 2018

Если бы вы могли добавить атрибут данных на каждую из кнопок, чтобы указать галерею, это сделало бы вещи красивыми и чистыми. Если вы не можете сделать это, вы все равно можете туда добраться, но это будет немного грязно. 

$('<button-selector>').click(function() {
  var buttonClasses = this.classList.value;
  var galleryNumber = buttonClasses.match(/button(\d+)/)[1];
  window.location.hash = '#gallery' + galleryNumber;
});

где <button-selector> - это селектор, который выберет все ваши кнопки.

Краткое объяснение регулярного выражения, которое я здесь использую. .match() - это строковый метод, который запускает регулярное выражение для строки и возвращает массив информации о совпадении. Аргумент, который я передаю ему, является регулярным выражением (окруженным косой чертой).

Это регулярное выражение сначала соответствует литеральной строке button. Затем захватывает совпадение (обозначается скобками) для одной или нескольких (обозначается +) числовых цифр (обозначается \d) , Второй элемент массива, возвращаемый из match, является захваченной частью совпадения. В этом случае вторым аргументом будут числовые цифры, следующие за button в classList.

Если бы вместо этого вы могли добавить атрибут данных (например, <button data-gallery="76">Gallery 76</button>), вы могли бы сделать это: 

$('<button-selector>').click(function() {
  var galleryNumber = this.dataset.gallery;
  window.location.hash = '#gallery' + galleryNumber;
});
0 голосов
/ 01 сентября 2018

Может работать простой шаблон регулярных выражений, такой как / \ d + /.

Что-то вроде: 

$(".button2").click( function() {
    ajaxFunction('#gallery' + this.id.match(/\d+/)[0]);    
});

Редактировать: Судя по вашим комментариям, у вас есть ответ. Вам просто нужно применить это ко ВСЕМ кнопкам без добавления сотен обработчиков кликов:)

Для этого вам нужно заглянуть в event delegation. JQuery обеспечивает это легко с помощью их метода on. Например: 

<div class="container">
    <button class="button1">...</button>
    <button class="button2">...</button>
    <button class="button3">...</button>
    <button class="button4">...</button>
    <button class="button5">...</button>
</div>

<script>
    $('.container').on('click', 'button', function () {
        var $btn = $(this);
        var className = $btn.attr('class'); // or Id
        var idNum = className.match(/\d+/)[0];
        ajaxFunction('#gallery' + idNum);
    });
</script>

Нечто подобное позволит вам иметь один обработчик click, который будет прослушивать все клики, которые bubble от его дочерних элементов. Иногда люди делают что-то вроде: 

$('body').on('click', '.selector', handler);

Как правило, вы хотите, чтобы обработчик был как можно ближе к вашим кнопкам.

Одним из основных преимуществ делегирования событий является то, что если у вас есть 1000 кнопок, на которые все должны ответить, вы привязываете только одного слушателя, а не тысячу слушателей для каждой кнопки. Кроме того, требуется всего одна строка скрипта, а не 1000 строк кода:)

Надеюсь, это поможет!

jQuery's по документации

0 голосов
/ 01 сентября 2018

Это означает изменение вашего HTML, но я бы рекомендовал использовать атрибуты данных: 

<input class="myGalleryBtn" value="Clicky" type="button" data-id="3" />

И когда нажата кнопка, вы берете этот атрибут: 

$(".myGalleryBtn").click(function(){
    var galleryid = $(this).attr("data-id");
    window.location.hash = "#gallery" + galleryid;
});

Вы можете начать считать символы и разбивать строки на «кнопке», но это немного странно, и этот метод является обычным подходом для хранения и получения произвольных значений из DOM.

https://api.jquery.com/data/#data-html5

...