DEMO

Question

我的网站上有很多支付系统和说明（签证，万事达卡，美国运通卡等）。

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

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

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

Answer 1

由于我看不到你的标记，我会即兴发挥...... 有几点需要注意：

我使用.fadeToggle()代替.fadeIn()和.fadeOut()
使用公共类切换按钮，并为所有这些按钮设置一个.click()处理程序
在标记中使用data-*

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：

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

DEMO

Answer 2

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

JSFiddle

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

Answer 3

为每个元素添加一个类，并使用data-属性获取应显示的元素 HTML

<button class="show" data-id="element1">Show</button>
<button class="hide" data-id="element1">Hide</button>
<button class="show" data-id="element2">Show</button>
<button class="hide" data-id="element2">Hide</button>
<div class="element" id="element1">Element1</div>
<div class="element" id="element2">Element2</div>

Js

$(function () {
    $(".show").click(function () {
       $("#" + $(this).data("id")).fadeIn(); 
    });

    $(".hide").click(function () {
       $("#" + $(this).data("id")).fadeOut(); 
    });
});

JsFiddle

Answer 4

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

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();
   });   
};

少数元素的功能相同

4 个答案:

DEMO