同じ番号を含むクラス/ idsのJQueryセレクターの質問

Question

私のウェブサイトには、「element1」、「element2」、「element3」などのクラスの要素セットがあり、クラス「1」、 「2」、「3」である。これらはDOMでは直接関係していないので、親子セレクタは使用できません。

ユーザーが「element1」をホバリングすると、「1」のエフェクト/機能がトリガーされるJQueryスクリプトを作成したいと思います。

もちろん、私はすべてのペアリングを手動で書きたいとは思わない。セレクタがクラス名の番号を「検出」するように、このコードをどのように書くことができますか？正規表現を使用する必要がありますか？

必要に応じてHTMLを変更できます。

Answer 1

すべての要素を有効にするコードを1ビットだけ使用したい場合は、次のようにします。

$('.hover').hover(function() { 
    var element = $(this).attr('class').replace(' hover', ''); 
    element = element.replace('element', ''); 
    $('.'+element).slideToggle(); 
}); 

あなたが作業したいすべての要素にクラスホバーを追加する必要があります。次に、要素番号を取得し、その要素を切り替えます。

これはサンプルHTML

<a href="#" class="element1 hover">Element 1</a><br/> 
<a href="#" class="element2 hover">Element 2</a><br/> 
<div class="1 hidden">You are hovering over element 1</div> 
<div class="2 hidden">You are hovering over element 2</div> 

がhere for a demo

を参照してくださいすることができ、コメントdemo here

Answer 2

すべてのあなたのIDは単にelementXている場合は、正規表現なしString.prototype.replaceを使用してクラスを得ることができる：

// `this` refers the DOM element in question 
var class = this.id.replace('element', ''); 

IMOのあなたの要素数ではないだけに構成されたクラス名を与える方が良いです。

$('.someclass').hover(function() { 
    $('.' + this.id.replace('element', '')).something(); 
}); 

Answer 3

あなたは

$("[id^='element']").. 

をやって試すことができますか、それはループ

に使用してください：

最良の方法は、クラスすぎIDのこの種を持っているすべてのそれらの要素を与えることです

for (i = 0; i < 10; i++) { 
    $('element' + i).. 
}