Javascript jQuery：遍历选择器ID

我有一些jQuery代码，这是非常冗余的。我想重构它，以避免每30个数字重复一次。每个pin小ID都有一个具有相同编号的pin大ID。我希望有一个代码，可以对每个ID使用更高的数字（#pin-Small2、#pin-Small3、#pin-Big2、#pin-Big3等等…）。它是用CoffeeScript编写的，但我也提供了JS版本

我找不到迭代这些数字的开始。你能帮我吗？如果你能这么做，我将非常感激，不介意它是JS还是CS。非常感谢！：）

咖啡脚本

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

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

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

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

JavaScript

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

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

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

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

---

使用CSS类和相关选择器。。。HTML:

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

---

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

您应该对这些元素使用

class

对它们进行分组。你能发布你的HTML代码吗？这样我们就可以看到如何从

#pin small

遍历到

#pin big

很好，这对我最合适！聪明的解决方案，非常感谢您的帮助！（我编辑了代码，因为与数据相关的小pin值中有一个小错误：它们是pin大而不是pin小）另一个解决方案，但不适合我的标记！不过，谢谢你！