Question

我有一些非常多余的jQuery代码。我想重构它以避免每30个数字复制它。每个引脚 - 小ID都有一个具有相同编号的引脚大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();
});

jQuery：迭代选择器ID

2 个答案: