使用了jQuery函數數組和循環通過它

我想凝結驗證碼：使用了jQuery函數數組和循環通過它

$("a.clearfix.scalability").click(function() { 
    $("h2.cases-header").fadeOut(100, function() { 
    $("h2.cases-header").text("Scalability").fadeIn(100); 
}) 
}) 
$("a.clearfix.international-compliance").click(function() { 
    $("h2.cases-header").fadeOut(100, function() { 
    $('h2.cases-header').text("International Compliance").fadeIn(100); 
    }) 
}) 
$("a.clearfix.rewards").click(function() { 
    $("h2.cases-header").fadeOut(100, function() { 
    $('h2.cases-header').text("Rewards Program").fadeIn(100); 
    }) 
}) 
$("a.clearfix.mom-baby").click(function() { 
    $("h2.cases-header").fadeOut(100, function() { 
    $('h2.cases-header').text("Mom & Baby").fadeIn(100); 
    }) 
}) 
$("a.clearfix.online-travel-agency").click(function() { 
    $("h2.cases-header").fadeOut(100, function() { 
    $('h2.cases-header').text("Online Travel Agency").fadeIn(100); 
    }) 
}) 
$("a.clearfix.food-delivery").click(function() { 
    $("h2.cases-header").fadeOut(100, function() { 
    $('h2.cases-header').text("Food Delivery").fadeIn(100); 
    }) 
})

我想知道正確的方式來設置此。我已經開始使用2個獨立的數組，其中需要插入jquery函數的信息，但我不確定如何讓它循環或如果我正確調用數組對象。到目前爲止我的代碼是：

var anchors = ["a.clearfix.scalability", "a.clearfix.international- 
compliance", "International Compliance", "a.clearfix.mom-baby", 
"a.clearfix.food-delivery"]; 
var copy = ["Scalability", "International Compliance", "Rewards Program", 
"Online Travel Agency", "Food Delivery"]; 

$(anchors[0]).click(function() { 
    $("h2.cases-header").fadeOut(100, function() { 
     $("h2.cases-header").text(copy[0]).fadeIn(100); 
    }) 
})

來源

2017-06-21 jessica mele

HTML結構如何？你是否試圖按順序瞄準元素？如果是這樣，你可以使用jQuery的'.next（）'。 –

如果你改變你的JavaScript數組的形狀是JavaScript對象的單個陣列，每一個都包含一個anchor和copy財產，那麼你就可以遍歷併線了根據需要將事件：

var headers = [ 
    {anchor: "a.clearfix.scalability", copy: "Scalability"}, 
    {anchor: "a.clearfix.international-compliance", copy: "International Compliance"} 
]; 

$.each(headers, function(index, header) { 
    $(header.anchor).click(function() { 
     $("h2.cases-header").fadeOut(100, function() { 
      $("h2.cases-header").text(header.copy).fadeIn(100); 
     }) 
    }) 
});

來源

2017-06-21 20:12:15 dana

您可以在HTML元素使用data-屬性來存儲您可以事件處理程序的內部搶額外的數據，比如：

$(".cases-header-link").click(function() { 
 
    var link = $(this); 
 
    $("h2.cases-header").fadeOut(100, function() { 
 
    $('h2.cases-header').text(link.attr("data-text")).fadeIn(100); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <a href="Javascript:void(0)" class="clearfix cases-header-link" data-text="Scalability">Scalability</a> 
 
    <a href="Javascript:void(0)" class="clearfix cases-header-link" data-text="Rewards Program">Rewards Program</a> 
 
    <a href="Javascript:void(0)" class="clearfix cases-header-link" data-text="Mom & Baby">Mom &amp; Baby</a> 
 
    <a href="Javascript:void(0)" class="clearfix cases-header-link" data-text="Food Delivery">Food Delivery</a> 
 
</div> 
 
<h2 class="cases-header"></h2>

來源

2017-06-21 20:14:24 mhodges

使用了jQuery函數數組和循環通過它

回答

相關問題