Как мне создать разные функции Jquery для каждой кнопки?

Question

У меня есть форма с пятью кнопками и несколькими флажками, содержащими разные значения.

<form action="" method="post" id="create-user">
    <button type="button" name="new-user">New</button>
    <button type="button" name="activate-user">Activate</button>
    <button type="button" name="block-user">Block</button>
    <button type="button" name="unblock-user">Unblock</button>
    <button type="button" name="delete-user">Delete</button>
    <input type="checkbox" value="1>" name="userId[]" />
    <input type="checkbox" value="2>" name="userId[]" />
    <input type="checkbox" value="3>" name="userId[]" />
    <input type="checkbox" value="4>" name="userId[]" />
    <input type="checkbox" value="5>" name="userId[]" />
</form>

теперь на основе события JavaScript, такого как onclick, я хотел бы выполнить разные действия для разных кнопок, например.

a) <button type="button" name="new-user">New</button>

Когда пользователь нажимает эту кнопку, он должен перенаправить на следующий URL. 'index.php?users&option=create'.

b) <button type="button" name="activate-user">Activate</button>

эта кнопка используется для Ajax, она должна извлечь выбранное значение флажка в массиве, например userId[], и отправить данные вmanage-users.php и обновление формы после получения ответа.а остальные три кнопки «Блок», «Разблокировать» и «Удалить» следуют той же процедуре, что и эта.

И все это должно быть сделано с использованием JQuery, так как я все еще новичок в JS / JQuery, я бы оценил, есликто-то может помочь мне с созданием функции JQuery.

спасибо.

Answer 1

Вы можете использовать event.target и реагировать соответственно на нажатие кнопки:

$('button').click(function(event){
   var name= event.target.name;
   if (name == 'delete-user'){
     //delete the user
   }else if (name == 'new-user'){
     // and so on

});

Answer 2

Самый простой способ - добавить атрибут id к вашим кнопкам, чтобы вы могли легко нацеливать их с помощью jQuery.

Например:

<form action="" method="post" id="create-user">
    <button type="button" name="new-user" id="new-user">New</button>
    <button type="button" name="activate-user" id="activate-user">Activate</button>
    <button type="button" name="block-user" id="block-user">Block</button>
    <button type="button" name="unblock-user" id="unblock-user">Unblock</button>
    <button type="button" name="delete-user" id="delete-user">Delete</button>
    <input type="checkbox" value="1>" name="userId[]" />
    <input type="checkbox" value="2>" name="userId[]" />
    <input type="checkbox" value="3>" name="userId[]" />
    <input type="checkbox" value="4>" name="userId[]" />
    <input type="checkbox" value="5>" name="userId[]" />
</form>

Затем использовать jQuery для подключения обработчиковсобытие щелчка на кнопках примерно так:

<script type="text/javascript">
    $().ready(function(){
        $('#new-user').click(function() {
            // do your code here
        });
        $('#activate-user').click(function() {
            // do your code here
        });
        $('#block-user').click(function() {
            // do your code here
        });
        $('#unblock-user').click(function() {
            // do your code here
        });
        $('#delete-user').click(function() {
            // do your code here
        });
    });
</script>

Это не означает, что вы должны использовать id s для нацеливания на кнопки, вы можете использовать что-то вроде следующего с вашим текущим HTML-кодом:

<script type="text/javascript">
    $().ready(function(){
        $('button[name="new-user"]').click(function() {
            // do your code here
        });
        $('button[name="activate-user"]').click(function() {
            // do your code here
        });
        $('button[name="block-user"]').click(function() {
            // do your code here
        });
        $('button[name="unblock-user"]').click(function() {
            // do your code here
        });
        $('button[name="delete-user"]').click(function() {
            // do your code here
        });
    });
</script>

id считаются лучшей практикой, и браузер быстрее находит в DOM, чем поиск по атрибуту, как в моем последнем примере.

Answer 3

Основная идея заключается в создании селектора для каждой кнопки и присоединении обработчика событий для каждого соответствующего элемента. Пример

$("button[name='new-user']").click(function() {
   window.location = "index.php?users&option=create";
});

Что здесь происходит, так это

1. $("button[name='new-user']") находит каждый элемент кнопки с именем new-user
2. .click(param) присоединяет обработчик событий к каждому элементу, найденному на первом этапе. Обработчик события вызывается при возникновении события onclick
3. В качестве параметра для click мы создаем новую функцию, которая выполняется как обработчик событий
4. window.location инструктирует браузер изменить текущий URL.

Вероятно, выполнение будет быстрее, если вы используете атрибут id для идентификации каждой кнопки. Тогда селектор jQuery $("#new-button") сможет использовать document.getElementById, чтобы найти нужную кнопку.

Я предлагаю вам погрузиться в документацию jQuery, поскольку она исключительно хороша и содержит примеры кода для всех функций. После того, как вы попытались что-то сделать, пришло время спросить, что вы сделали не так.

Кроме того, в зависимости от вашей целевой аудитории, обычно хорошей идеей является постепенное снижение производительности в случае, если javascript не поддерживается (программы чтения с экрана, мобильные устройства и т. Д.). Если навигация полностью выполнена с использованием JavaScript, есть определенный набор пользователей, которые вообще не могут использовать сервис.

Answer 4

вам нужно будет поставить атрибут (например, идентификатор) на каждую кнопку, а затем прочитать этот идентификатор $ (this) .attr ("идентификатор"), чтобы выяснить, какая кнопка была нажата во время обратного вызова события: