我可以自動生成一個jQuery塊，對不同的元素做同樣的事情嗎？

爲了簡單起見，假設我有一個元素列表「＃a1，a2，a3，a4 ...」和另一個列表「＃b1，b2，b3，b4 ...」。我想要#b1顯示，當我點擊#a1時，我想要#b2顯示，當我點擊#a2時，依此類推。我可以自動生成一個jQuery塊，對不同的元素做同樣的事情嗎？

我可以只寫：

$("#a1").click(function() { 
    $("b1).show(); 
}); 
$("#a2").click(function() { 
    $("b2).show(); 
}); 
...

等。但是，如果列表變長，那將會是很多代碼。

有沒有辦法自動生成jQuery？這裏有一些很粗糙的軌道-Y僞代碼來說明我想做的事：

for (ids a1 - a99).each do |id| 
    $("#a[id]").click(function() { 
    $("#b[id]).show(); 
    }); 
end

來源

2016-04-11 Jeff Caros

爲所有'a'元素添加一個公共類'a'，然後'$（「。a」）。click（function（）{ $ （'＃'+ this.id.replace（'a'，'b'））。show（）; }）; ' –

你能分享html樣本嗎 –

有多種方法可以解決這個問題，但是要給出一個合適的解決方案你需要分享html樣本 –

使用substr()剪出整數部分（或使用parseInt()，只會返回包含整數值），然後使用： $(".myControls").on("click", function(){ $("#b"+ //the id in question).show(); });.myControls是需要與該功能連接的所有元素的選擇器。

來源

2016-04-11 07:43:21

而不是添加一個id - 添加一個類。並使用以下方案

$(".classA").click(function() { 
    // get index of clicked element among elements with classA 
    var index = $(".classA").index(this); 
    // show element from classB with same index as clicked element 
    $(".classB").eq(index).show(); 
});

一個簡單的小提琴https://jsfiddle.net/xjseca5d/

來源

2016-04-11 07:43:36

使用starts-with選擇和使用正則表達式得到的數量。

$('[id^="a"]').click(function(){ 
    var number = /\d+/.exec(this.id)[0]; 
    $('#b' + number).show() 
});

來源

2016-04-11 07:46:30 BenG

我認爲一個循環可能就足夠了。附加document ready中的所有處理程序。

// arr is an array of int, according to your DOM 
$.each(arr, function(){ 
    $("#a"+this).click(function() { 
    $("#b"+this).show(); 
    }); 
});

來源

2016-04-11 07:46:58 jackomelly

你可以試試這個

$('div[id^="a"]').on("click",function(){ 
    this.id.replace('a', 'b')).show(); 
})

來源

2016-04-11 07:47:12

添加類 'a' 到所有的 'A' 的元素，一類 'B' 添加到所有的 'B' 的元素，

連接'a'類的點擊事件，將'a'中的字母'a'替換爲'b'。

$('.a').click(function(){ 
    $('#'+this.id.replace('a','b')).show(); 
});

來源

2016-04-11 07:52:18

對於先進的情況下，我建議這真棒插件： http://james.padolsey.com/javascript/regex-selector-for-jquery/

您可以用正則表達式這樣選擇你的元素：

jQuery.expr[':'].regex = function(elem, index, match) { 
 
    var matchParams = match[3].split(','), 
 
     validLabels = /^(data|css):/, 
 
     attr = { 
 
      method: matchParams[0].match(validLabels) ? 
 
       matchParams[0].split(':')[0] : 'attr', 
 
      property: matchParams.shift().replace(validLabels, '') 
 
     }, 
 
     regexFlags = 'ig', 
 
     regex = new RegExp(matchParams.join('').replace(/^s+|s+$/g, ''), regexFlags); 
 
    return regex.test(jQuery(elem)[attr.method](attr.property)); 
 
} 
 

 
alert($(":regex(id,a[0-9]{2})").length); 
 

 
$(":regex(id,a[0-9]{2})").click(function() { 
 
    var numberPart = /\d+/.exec(this.id)[0]; 
 
    alert($("#b" + numberPart).text()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="a9">a9</div> 
 
<div id="b99">b99</div> 
 
<div id="a99">a99</div>

來源

2016-04-11 07:56:36

我可以自動生成一個jQuery塊，對不同的元素做同樣的事情嗎？

回答

相關問題