Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Как привязать определённую кнопку к определённому скрипту (https://javascript.ru/forum/dom-window/82021-kak-privyazat-opredeljonnuyu-knopku-k-opredeljonnomu-skriptu.html)

petyann 02.03.2021 23:25
Как привязать определённую кнопку к определённому скрипту
 
Здравствуйте.
Возник вопрос: как привязать определённую кнопку к определённому скрипту?
На странице имеются две кнопки <button> и два скрипта. Как сделать так, чтобы по каждому нажатию первой кнопки выполнялся только первый скрипт, а по каждому нажатию второй кнопки выполнялся только второй скрипт. Как это можно реализовать?
Вот, собственно, сам код. Сейчас при нажатии на любую кнопку выполняется действие только второго скрипта, и только один раз, после чего никакой реакции на нажатия не происходит. Если же один из скриптов удалить, то другой работает как надо, но только на первой кнопке. Но требуется, чтобы именно действие определённой кнопки было привязано к определённому скрипту.
Что и куда тут следует прописать?

Код:
  <button data-sort="-1">Сортировать по-мощности</button>
    <button data-sort="-1">Сортировать по цене</button>

                <script>
                // Фильтр
$('select').change(function(){
    $('.catitem').removeClass('hidden');
    var power = $(this).val();
    $('.catitem').each(function(){
        if($(this).data('power') != power && power > 0) {
            $(this).addClass('hidden');
        }
    });
});
// Сортировка
$('button').click(function(){
    if($(this).data('sort') == -1) {
        $(this).data('sort', 1);
    }else {
        $(this).data('sort', -1);
    }
    var listCat = $('.catitem');
    listCat.sort(function(a,b){
        return ($(a).data('power') - $(b).data('power')) * $('button').data('sort') ;
    });
    listCat.each(function(idx,itm){
        $('.catitems').append(itm);
    });
});

                </script>

                <script>
                // Фильтр
$('select').change(function(){
    $('.catitem').removeClass('hidden');
    var price = $(this).val();
    $('.catitem').each(function(){
        if($(this).data('price') != price && price > 0) {
            $(this).addClass('hidden');
        }
    });
});
// Сортировка
$('button').click(function(){
    if($(this).data('sort') == -1) {
        $(this).data('sort', 1);
    }else {
        $(this).data('sort', -1);
    }
    var listCat = $('.catitem');
    listCat.sort(function(a,b){
        return ($(a).data('price') - $(b).data('price')) * $('button').data('sort') ;
    });
    listCat.each(function(idx,itm){
        $('.catitems').append(itm);
    });
});
          </script>

рони 02.03.2021 23:50
petyann,
придумать разные классы для разных кнопок, <button class="one">
<button class="to">

и будет
$('button.one').click
и
$('button.to').click

petyann 03.03.2021 00:08
Цитата:
Сообщение от рони (Сообщение 534235)
petyann,
придумать разные классы для разных кнопок, <button class="one">
<button class="to">

и будет
$('button.one').click
и
$('button.to').click
Ага. Сделал. Первая кнопка работает нормально, сортирует как надо. Но вторая кнопка теперь срабатывает только один раз, после чего не реагирует. Хотя если снова нажать первую кнопку, то вторя снова сработает, но только один раз.
Из-за чего так? Что можно предпринять?
P.S. Заметил, что если кнопки поменять местами, то именно та, которая стоит первой, работает нормально, а вторая срабатывает только один раз.

рони 03.03.2021 00:31
petyann,
https://javascript.ru/forum/jquery/8...tml#post529000

petyann 03.03.2021 00:55
Цитата:
Сообщение от рони (Сообщение 534238)
Только не совсем понимаю, как мой код под это переделать?

рони 03.03.2021 01:07
petyann,
я могу только догадываться, что вы хотите сделать.

petyann 03.03.2021 02:33
Цитата:
Сообщение от рони (Сообщение 534240)
petyann,
я могу только догадываться, что вы хотите сделать.
Спасибо, вы очень помогли с классами. Всё заработало.


Часовой пояс GMT +3, время: 14:18.