Javascript 对少数元素使用相同的函数

我在我的网站上有很多支付系统和说明（visa、万事达卡、美国运通等等）

此脚本在单击按钮时显示说明

$('#show-visa').click(function() {
    $('#instruction-visa').fadeIn();
});
$('#close-visa').click(function() {
    $('#instruction-visa').fadeOut();
});

---

我需要为每个支付系统复制相同的脚本，但其中有很多（大约20-25）。。为每个支付系统编写相同的脚本不是个好主意。我怎样才能做得更好

为每个元素添加一个类，并使用

data-

属性获取应该显示的元素。
HTML

---

由于我看不到您的标记，我将即兴创作。。。 有几点需要注意：

• 我正在使用而不是

  .fadeIn（）

  和

  .fadeOut（）

• 为切换按钮使用一个公共类，并为所有按钮使用一个

  。click（）

  处理程序
• 在标记中使用

jQuery：

$('.toggle-option').click(function() {
    var $target = $(this).data('target'); // Get the data-target attribute
    $('#' + $target).fadeToggle();        // Toggle the id specified by data-target
});

HTML:

切换Visa
切换万事达卡
切换大师

---

如果您想在html结构中为每个支付系统使用不同的选择器，您可以使用您的支付系统名称创建一个数组，并使用$。每个函数为每个支付系统添加处理程序

var paymentSystems = ['visa', 'mastercard', etc... ];
$.each(paymentSystems, function(name){
   $('#show-' + name).on('click', function() {
      $('#instruction-'+name).fadeIn();
   });

   $('#close-' + name).on('click', function() {
      $('#instruction-'+ name).fadeOut();
   });   
};

---

您可以扩展jquery原型对象。我为您创建了一个简单的JSFIDLE

---

我们不应该看到标记吗？

$('.toggle-option').click(function() {
    var $target = $(this).data('target'); // Get the data-target attribute
    $('#' + $target).fadeToggle();        // Toggle the id specified by data-target
});

<button class="toggle-option" data-target="visa">Toggle Visa</button>
<button class="toggle-option" data-target="mastercard">Toggle Mastercard</button>
<button class="toggle-option" data-target="maestro">Toggle Maestro</button>

var paymentSystems = ['visa', 'mastercard', etc... ];
$.each(paymentSystems, function(name){
   $('#show-' + name).on('click', function() {
      $('#instruction-'+name).fadeIn();
   });

   $('#close-' + name).on('click', function() {
      $('#instruction-'+ name).fadeOut();
   });   
};

$.fn.test = function(){
    alert('the id is: ' + $(this).attr('id'));
}