Vereinfachen Sie Selektor mit nummerierten IDs

Question

Ich habe eine Reihe von Divs auf der gleichen Seite, für die ich eine Klick-Funktion angefügt haben, die wie ein <a>-Tag, leitet den Benutzer auf eine URL aus einem benutzerdefinierten Daten-Attribut extrahiert. Mein HTML ist wie folgt:

<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> 

und jQuery:

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

Meine Frage ist, ist es möglich, die Wähler zu so etwas wie zu vereinfachen:

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

, so dass es würde viel kompakter für den Fall, dass ich viele dieser divs auf der gleichen Seite enthalten habe? Wenn es möglich ist, wie würde ich diesen Effekt erreichen?

Answer 1

Sie nutzen könnten $('div[data-href]'), die mit einem data-href Attribut in jedem div gelten.

Ihr Beispiel mit einem Update: https://jsfiddle.net/fLj7y0kz/1/

Die typische Art, wie ich es getan habe, und es ist getan gesehen als @arop schlägt und eine bestimmte Klasse für diese Elemente verwenden und die Klassenauswahl $('div.myclass) `verwenden.

Answer 2

Warum nicht eine Klasse auf jeder Schaltfläche verwenden? dann wählen Sie einfach die Klasse

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

Answer 3

Sie können die nth-child() -Eigenschaft verwenden, um das Element nach Index abzurufen. Sehen Sie sich den folgenden Beispielcode an: $ ('# my-button: nth-child (1)') click (function() {})

Answer 4

Erstellt dynamische divs mit IDs aus dem loop.Hope Dies ist hilfreich für

Sie

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