Вызывать одну и ту же функцию jQuery в нескольких кнопках

Я не очень хорошо знаком с jQuery. У меня есть этот код, который я загрузил, чтобы создать всплывающее окно fade in/fade. Здесь код:

<script type='text/javascript'>
    $(document).ready(function() {
        $('#button').click(function(e) { 
            $('#modal').reveal({ 
                animation: 'fade',
                animationspeed: 150,
                closeonbackgroundclick: true, 
                dismissmodalclass: 'close'
            });
            return false;
        });
    });
</script>

Вышеприведенный код выполняется при нажатии кнопки с id='button'. Теперь у меня есть несколько кнопок, как я могу вызвать эту функцию на всех кнопках? Я попытался установить id всех кнопок на button, но работает только первая кнопка. Любая помощь будет очень высоко ценится. Кстати, я забыл упомянуть, в моем .php файле у меня есть эти коды:

for ($c=1;$c<=5;$c++){
echo "<input type='button' id='button'">
};

В этом php-коде будут отображаться 5 кнопок с тем же идентификатором, что и 'button'. Я хочу, чтобы это произошло, когда я нажимаю любую из 5 кнопок, которые будет исполнять функция jQuery, которая выдает форму fade in/fade out.

Ответы

Ответ 1

Первое решение:

function doClick(e) { 
   $('#modal').reveal({ 
     animation: 'fade',
     animationspeed: 150,
     closeonbackgroundclick: true, 
     dismissmodalclass: 'close'
   });
   return false;
}
$('#button1').click(doClick);
$('#button2').click(doClick);

Второе решение:

Дайте классу "someClass" всем задействованным кнопкам

<input type=button class=someClass ...

и do

$('.someClass').click(function(e) { 
...
});

Третье решение:

Используйте запятую для разделения идентификаторов:

$('#button1, #button2').click(function(e) { 
...
});

Как правило, лучшим решением является второе: он позволяет добавлять кнопки в код без изменения части javascript. Если вы добавите некоторые из этих кнопок динамически, вы даже можете сделать

$(document).on('click', '.someClass', function(e) { 
...
});

Ответ 2

Идентификаторы должны быть уникальными. Попробуйте использовать что-то вроде

$('input[type="button"]')

Ответ 3

ваш класс может вызывать их классом, используя , отдельный идентификатор

$(document).ready(function() {
$('#button, #button1, #button2').click(function(e) { 
$('#modal').reveal({ 
animation: 'fade',
animationspeed: 150,
closeonbackgroundclick: true, 
dismissmodalclass: 'close'
});
return false;
});
});​

Ответ 4

<script type='text/javascript'>
$(document).ready(function() {
$('#button1,#button2,#button3').click(function(e) { 
$('#modal').reveal({ 
animation: 'fade',
animationspeed: 150,
closeonbackgroundclick: true, 
dismissmodalclass: 'close'
});
return false;
});
});
</script>

или использовать класс, упомянутый bt dystroy

Ответ 5

Вы можете использовать имя класса css вместо id для достижения его, как показано ниже

<script type='text/javascript'>
$(document).ready(function() {
    $('.fade').click(function(e) { 
        $('#modal').reveal({ 
            animation: 'fade',
            animationspeed: 150,
            closeonbackgroundclick: true, 
            dismissmodalclass: 'close'
        });
        return false;
    });
});
</script>

и ваш html кнопок

<button class="fade">Button1</button>
<button class="fade">Button2</button>
<button class="fade">Button3</button>

Ответ 6

Используйте разные идентификаторы для кнопок и измените свою функцию, как показано ниже.

$('# button1, # button2, # button3'). click (function (e) {
.....

Ответ 7

Если вы используете ту же кнопку для всех кнопок, тогда нет необходимости называть все кнопки. Просто используйте этот код. Кажется, вы используете анимацию в этом коде.... хорошо используйте togglefade вместо раскрытия

<script type=text/javascript> $(document).ready(function(){ $("button").click(function(){ $("#buttonid").fadein(); $("#buttonid").fadeout(); }); }); </script>

Ответ 8

Создайте массив для уникального buttonid динамически в цикле, например

$button[] = '#'.$buttonid;

Вне цикла используйте implode для преобразования этого массива в строку, разделенную запятыми

$jsstring = implode(",",$button);

Теперь используйте php для передачи над строкой как селектор в вашем js-коде, например:

$(document).ready(function() {
    $('< php echo $jsstring ; ?>').click(function(){ });
});

Ответ 9

Чтобы использовать более простые способы, как следующий код:

Способ 1:

<script>
    $(document).ready(function () {
        $('input:button[name="button1"],[name="button2"]').click(
            function () {
                alert('test')
            });
    });
</script>
<input type="button" id="button1" name="button1" value="Filter" />
<input type="button" id="button2" name="button2" value="Filter" />

Способ 2:

<script>
    $(document).ready(function () {
        $('button[id="button1"],[id="button2"]').click(
            function () {
                alert('te2222st')
            });
    });
</script>
<button id="button1" >bbbbb</button>
<button id="button2" >bbbbb</button>