gọi cùng một chức năng jQuery trong nhiều nút

Question

Tôi không thực sự quen thuộc với jQuery. Tôi có mã này mà tôi đã tải xuống để tạo biểu mẫu bật/tắt mờ dần. Đây là mã:

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

Đoạn mã trên thực hiện khi một nút có id='button' được nhấp. Bây giờ tôi có nhiều nút, làm thế nào tôi có thể gọi chức năng này trong tất cả các nút? Tôi đã thử đặt id của tất cả các nút thành button nhưng chỉ có nút đầu tiên hoạt động. Bất kỳ trợ giúp sẽ được rất nhiều đánh giá cao. Bằng cách này tôi quên đề cập đến, trong file .php của tôi có mã này:

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

mã php này sẽ hiển thị 5 nút với id cùng đó là 'nút'. Điều tôi muốn xảy ra là khi tôi nhấp vào bất kỳ nút nào trong số 5 nút, chức năng jQuery sẽ thực thi sẽ xuất hiện một biểu tượng mờ dần/mờ dần.

Answer 1

giải pháp đầu tiên:

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

giải pháp thứ hai:

tặng một lớp "SomeClass" cho tất cả các nút tham gia

<input type=button class=someClass ... 

và làm

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

giải pháp thứ ba:

Sử dụng dấu phẩy để id riêng biệt:

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

---

Nói chung, giải pháp tốt nhất là lần thứ hai một: nó cho phép bạn thêm các nút trong mã của bạn mà không cần sửa đổi phần javascript. Nếu bạn thêm một số nút trong số đó, bạn thậm chí có thể làm

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

Answer 2

ID phải là duy nhất. Hãy thử sử dụng một cái gì đó giống như

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

Answer 3

bạn lớp có thể gọi chúng bằng lớp học mà bạn sử dụng , id tách ra

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

Answer 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> 

hoặc lớp sử dụng khác như đã đề cập BT dystroy

Answer 5

Bạn có thể sử dụng css tên lớp học thay vì id để đạt được nó như dưới đây

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

và html của bạn trong những nút

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

Answer 6

Sử dụng id khác nhau cho các nút và thay đổi chức năng của bạn như dưới đây.

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

Answer 7

Nếu bạn sử dụng cùng một buttonid cho tất cả các nút sau đó không cần phải gọi tất cả buttons..just chỉ cần sử dụng code..It này có vẻ như bạn đang sử dụng hình ảnh động trong mã này .... cũng sử dụng togglefade thay vì tiết lộ

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

Answer 8

Tạo một mảng cho buttonid độc đáo động trong vòng lặp như

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

Ngoài việc sử dụng vòng lặp implode để chuyển đổi mảng này để dấu phẩy tách chuỗi

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

Bây giờ sử dụng php để vượt qua trên chuỗi làm công cụ chọn trong mã js của bạn như:

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