1

私はこのコードを持っています:

$('#sh1').hover(function(){$('#tip1').toggle()});
$('#sh2').hover(function(){$('#tip2').toggle()});
$('#sh3').hover(function(){$('#tip3').toggle()});
$('#sh4').hover(function(){$('#tip4').toggle()});

等

要素の数は 30 ～ 40 です。明らかに、これはそのようなことを行う正しい方法ではありません。しかし、どうすれば正しくなりますか？「for」ループまたは「if」条件または正規表現または何を使用しますか?

マークアップは次のようになります。

<div>
    <div id="sh1"></div>
    <div id="sh2"></div>
    <div id="sh3"></div>
    <div id="sh4"></div>
</div>
<div class="tip" id="tip1">text</div>
<div class="tip" id="tip2">text</div>
<div class="tip" id="tip3">text</div>
<div class="tip" id="tip4">text</div>
4

5 に答える 5

1

動作中のjsFiddleデモ

for古典的なループでそれを行うことができます。別の簡単な解決策を次に示します。

$(function () {
    $('[id^="sh"]').hover(function () {
        var index = $(this).attr('id').replace('sh', '');
        $('[id="tip' + index + '"]').toggle();
    });
});
于 2013-05-29T12:55:40.217 に答える
0
  • これらすべての要素が 1 つの親要素にある場合は、デリゲート イベントを使用します。そのホバーイベントを親にバインドできます。
  • クラスを使用して要素を参照します。と呼ばれる#sh1,#sh2,etc単一のクラスで参照します。.sh#tip1,#tip2,etc.tip
  • tipグループがグループ内にある場合は、shjquery のトラバーサル手法を使用してその要素に移動します。

パフォーマンスに関するこの最適化を超えると、マークアップのみに依存する可能性があります。

于 2013-05-29T12:56:21.373 に答える
0

属性セレクター (つまり、属性がセレクター [name^="value"] で始まる) を使用すると、次のことを実現できます。

例：

shとtipが divであると仮定します

$('div[id^="sh"]').hover(function(){$('div[id^="tip"]').toggle()});

更新しました：

$('div[id^="sh"]').hover(function() {
    var id = $(this).attr("id");
    id = parseInt(/\d+/.exec(id), 10);
    $("#tip"+id).toggle();
});

ライブデモを参照

于 2013-05-29T12:48:21.027 に答える
0

トリガーする各要素にクラスを配置し、それをセレクターとして使用できます。

このようなもの：

$('.YourClass').hover(function(){$(this).toggle()});

お役に立てれば。よろしく。

于 2013-05-29T12:54:25.090 に答える
0

循環させたい要素ごとにクラスを追加して追加します。

$(".YourClass").).hover(function(){$(this).toggle();});
于 2013-05-29T12:49:30.290 に答える