jQuery：遍歷選擇器ID

我有一些jQuery代碼是相當多餘的。我想重構它以避免每30個數字重複一次。每個pin-Small ID都有一個相同編號的pin-Big ID。我想有一個適用於每個ID號碼較高的代碼（＃pin-Small2，＃pin-Small3，＃pin-Big2，＃pin-Big3等等）。它是用CoffeeScript編寫的，但我也將它作爲JS版本提供。jQuery：遍歷選擇器ID

我沒有找到開始迭代這些數字。你能幫我嗎？如果你願意，我會非常感激，不要介意它是在JS還是CS。非常感謝！ :)

CoffeeScript的

$('#pin-Small1').on 
    mouseenter: -> 
     $(@).hide() 
     $('#pin-Big1').addClass "enabled" 

$('#pin-Big1').on 
    mouseleave: -> 
     $(@).removeClass "enabled" 
     $('#pin-Small1').show()

的JavaScript

$('#pin-Small1').on({ 
    mouseenter: function() {} 
}, $(this).hide(), $('#pin-Big1').addClass("enabled")); 

$('#pin-Big1').on({ 
    mouseleave: function() { 
    $(this).removeClass("enabled"); 
    return $('#pin-Small1').show(); 
    } 
});

來源

2013-10-15 christophe

您應該對這些元素使用'class'來對它們進行分組。你可以發佈你的HTML代碼，所以我們可以看到如何從'＃pin-small'遍歷到＃＃pin-big' –

看到你的HTML可以真正的幫助，因爲它可能會改變這個答案，但假設你的HTML看起來像這樣：

<div id="pin-Small1" class="small" data-related-big-pin="pin-Big1"></div> 
<div id="pin-Small2" class="small" data-related-big-pin="pin-Big2"></div> 
... 
<div id="pin-Big1" class="big" data-related-small-pin="pin-Small1"></div> 
<div id="pin-Big2" class="big" data-related-small-pin="pin-Small2"></div>

你可以使用數據屬性是這樣的：

$('.small').on 
    mouseenter: -> 
     $(@).hide() 
     var bigPinId = $(@).data("related-big-pin") 
     $('#' + bigPinId).addClass "enabled" 

$('.big').on 
    mouseleave: -> 
     $(@).removeClass "enabled" 
     var smallPinId = $(@).data("related-small-pin") 
     $('#' + smallPinId).show()

因此，我們使用類來綁定mouseenter/mouseleave函數，然後讀取數據屬性以查找它們與哪些元素進行交互。

來源

2013-10-15 12:52:15 shanabus

太棒了，對我來說最適合！聰明的解決方案，非常感謝你的幫助！（我編輯了代碼，因爲數據相關的小引腳值存在一個小錯誤：它們代表pin-Big而不是pin-Small） – christophe

使用CSS類和相關的選擇... HTML：

<div id="pin-Small1" class="pin"></div> 
<div id="pin-Small2" class="pin"></div> 
<div id="pin-Small3" class="pin"></div>

的jQuery：

$('.pin').each(function() { 
    // do something with each element, e.g. to hide them all: 
    $(this).hide(); 
});

來源

2013-10-15 12:44:29

這是另一個解決方案，但不適合我的標記！儘管如此，謝謝！ – christophe

jQuery：遍歷選擇器ID

回答

相關問題