jquery - jQuery でジェネリック ID 参照を作成する方法

Question

同じクラスの div 要素が約 6 つあります。それらのいずれかにマウスオーバーすると、それらの隣に別のdivを表示したいと思います。

mydiv- が常に一定である id="mydiv-divname" という形式のすべての ID を与えることを考えています。

mydiv-* 要素をどのように参照しますか。正確な構文は見つかりませんが、* が何らかのワイルドカードを表す $("#mydiv-"[*]) のようなものにする必要があると思います。

Answer 1

ID はどのような目的で使用されますか? それらがすべて同じクラス名でタグ付けされている場合、クラスごとにすべてにアクセスできます。

`$(".className")...

これらの要素の 1 つがホバーされたときにイベントをトリガーするには、次を使用します。

`$(".className").hover(... )

hover() 内の関数は、実際にホバーされている要素に対してのみトリガーされることに注意してください。

ここで達成しようとしていることと同様のことを行います-ホバー時に1つの要素をフェードインまたはフェードアウトします（そのクラスでマークされたページ上の多くの要素の）

Answer 2

次のように、id の代わりにセレクターでクラスを使用できないのはなぜですか。

jQuery('.commonClass');

Answer 3

あなたは次のようなものを目指しているようです：

HTML:

<div class="content" id="con_a">Hello world.</div>
  <div id="show_con_a" style="display:none">Show Me on content div "a" hover</div>

<div class="content" id="con_b">Nice to meet you.</div>
  <div id="show_con_b" style="display:none">Show Me on content div "b" hover</div>

<div class="content" id="con_c">See you later.</div>
  <div id="show_con_c" style="display:none">Show Me content div "c" hover</div>

ジャバスクリプト:

//Collect all divs with 'content' class
$('.content').each(function(){
    //Set mouse handler for each content div
    $(this).hover(function(){
        $('#show_' + this.id).show();
    },
    function(){
        $('#show_' + this.id).hide();
    });
});

代替ジャバスクリプト:

//Collect all divs with an id that begins with 'con_'
$("[id=^'con_']").each(function(){
    //Set mouse handler for each content div
    $(this).hover(function(){
        $('#show_' + this.id).show();
    },
    function(){
        $('#show_' + this.id).hide();
    });
});