Universal js für Gruppe von divs

Question

Ich habe wirklich einfache Frage für jemanden mit js Fähigkeit. Ich habe Elemente mit nummerierten ids wie: picture-0, die picture-1, die picture-3 .... und ich mag universal js dazu weiter unten anhand machen:

$(document).ready(function() {$("#pictureframe-0").hover(function() { 
     $("#cover-0").slideDown(500); 
    }, function() { 
     $("#cover-0").slideUp(500); 
    }); 
}); 

wo "0" variate. Danke für die Lösung.

Ich weiß, wenn ich dieses Skript wie 20x mal mit Zahlen 1-20 doppelte funktioniert es separetly: picture-0 wird aktiviert, Cover-0, die picture-1 wird aktiviert, Cover-1 usw.

-Code ist wie dies:

 <div class="pictureframe"> 
       <div class="cover">this is cover</div>   
     </div> 

Answer 1

Versuchen Sie, Ihren Selektor zu ändern. Wenn Sie ein Präfix Attributselektor verwenden, können Sie auswählen, den Rest der ID als Platzhalter verlassen:

$(document).ready(function() {$("[id^=pictureframe-]").hover(function() { 
     $("#cover-" + this.id.slice(-1)).slideDown(500); 
    }, function() { 
     $("#cover-" + this.id.slice(-1)).slideUp(500); 
    }); 
}); 

UPDATE: Wie ich in den Kommentaren erwähnt, ja, auch dies mit einer for Schleife tun könnte, obwohl persönlich bevorzuge ich den ersten Weg:

$(document).ready(function() { 
    for (let i = 0; i < $("[id^=pictureframe-]").length; i++) { 
     $("#pictureframe-" + i).hover(function() { 
      $("#cover-" + i).slideDown(500); 
     }, function() { 
      $("#cover-" + i).slideUp(500); 
     }); 
    } 
});