2

非常に冗長なjQueryコードがいくつかあります。30個ごとに重複しないようにリファクタリングしたいと思います。各 pin-Small ID には、同じ番号の pin-Big 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()

JavaScript

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

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

2 に答える 2

2

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-15T12:52:15.623 に答える