0

私は現在ウェブサイトに取り組んでおり、次の問題に悩まされています。

Web サイトには、「dot0001」、「dot0002」、「dot0003」などの ID を持つ小さなドット (画像) があります。ID「info0001」、「info00002」、「info0003」などの非表示の画像（visibility:hidden）もあります。

jQuery ソリューションを探しています。必要なのは、次のイベントを許可するコードです。

ユーザーがマウスを「dot0001」の上に移動すると、画像「info0001」が表示され、「dot0001」から離れると「info0001」が再び非表示になります。同じことが "dot0002"-"info0002" 、 "dot0003"-"info0003" などにも当てはまります。したがって、対応する 4 桁の数字を持つ情報画像のみが表示されます。

私は無限の試みをしましたが、どこにも行きませんでした。コードを貼り付けても意味がありません。

どんな助けでも大歓迎です！

4

2 に答える 2

2

このようなものは動作するはずです（テストされていませんが）：

$('[id^="dot"]').on({
    mouseenter: function(e) {
        var infoId = this.id.replace('dot', 'info');
        $('#' + infoId).show();
    },
    mouseleave: function(e) {
        var infoId = this.id.replace('dot', 'info');
        $('#' + infoId).hide();
    }
});

これは、attribute-starts-withセレクターを使用idして「ドット」で始まるすべての要素を選択し、イベント ハンドラーをそれらにバインドします。イベント ハンドラー関数自体は、単に "ドット" の部分idを "info" に置き換えて正しい新しいものを形成し、必要に応じて要素を表示または非表示にします。

要素が実際に存在するときに実行されるように、そのコードをイベント ハンドラーでラップすることを忘れないでくださいDOM ready。そうしないと、機能しません。

于 2013-01-15T23:57:01.853 に答える
1

ID が「ドット」で始まるすべての要素を取得し、マウスオーバー/アウトで関連する「情報」を表示/非表示にします。

$("[id^=dot]").hover(
  function(){
    $("#info" + this.id.substring(3)).css({"visibility":"visible"});
  },
  function(){
    $("#info" + this.id.substring(3)).css({"visibility":"hidden"});
  }
);

http://jsfiddle.net/EGBnR/

于 2013-01-16T00:00:54.047 に答える