jQuery：遍历选择器 ID

Question

我有一些非常多余的 jQuery 代码。我想重构它以避免每 30 个数字重复一次。每个 pin-Small ID 都有一个 pin-Big ID，编号相同。我想要一个代码，它适用于每个 ID 更大的数字（#pin-Small2、#pin-Small3、#pin-Big2、#pin-Big3 等等......）。它是用 CoffeeScript 编写的，但我也提供了 JS 版本。

我找不到迭代这些数字的起点。你能帮我吗？如果您愿意，我将非常感谢，不要介意它是在 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();
  }
});

Answer 1

查看您的 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 函数，然后读取数据属性以查找它们与哪些元素交互。

Answer 2

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