番号付きのセレクタを簡略化

Question

<a>タグのように動作するクリック機能を添付した同じページに一連のdivがあり、カスタムデータ属性から抽出したURLにユーザーを誘導します。

<div id="my-button1" class="button-style-1" data-href="http://www.stackoverflow.com"> 
    Button 
</div> 

<div id="my-button2" class="button-style-1" data-href="http://www.w3schools.com"> 
    Button 2 
</div> 

とjQuery：次のように私のHTMLはある

$('#my-button[i]') 

は、このようなことがあろうと：

$('#my-button1,#my-button2').click(function() { 
    var dataURL = $(this).data('href'); 
    window.open(dataURL, '_blank'); 
    }); 

は、私の質問はこれです、それは次のようにセレクタを簡素化することができます私はこれらのdivの多くが同じページに含まれている場合、はるかにコンパクトになりますか？可能であれば、どうすればこの効果を達成できますか？

Answer 1

クラスを選択します。 @aropを示唆し、これらの要素のための特定のクラスを使用すると、クラスセレクタ$('div.myclassを使用するように私はそれを行って、それが行わ見てきた典型的な方法があるhttps://jsfiddle.net/fLj7y0kz/1/

） `：

アップデートであなたの一例。

Answer 2

なぜすべてのボタンでクラスを使用しないのですか？その後、ちょうどあなたがdata-href属性を持つすべてのdiv要素に適用される$('div[data-href]')を使用することができます

$('.my-buttons').click(...) 

Answer 3

nth-child（）プロパティを使用すると、インデックスで要素を取得できます。 $（ '＃my-button：nth-​​child（1）'）をクリックしてください（function（）{}）

Answer 4

ループのIDを使用して動的divを作成しました。あなた

var mybutton = []; 
var url = ["http://www.stackoverflow.com", 
      "http://www.w3schools.com", 
      "http://www.w3schools.com/jquery", 
      "http://www.w3schools.com/css"]; 

for (i = 0; i < 4; i++) { 
    //alert("hi"); 
    $("body").append("<div class='button-style-1' 
    id='mybutton[" + [i] +"]' data-href=" + url[i] + ">Button</div>") 

} 

codepen - http://codepen.io/nagasai/pen/xOVERN