Wie kann ich diesen "Klick-Galerie" jQuery-Code besser machen? - Jquery

Folgendes ist eine grobe Art, die ich mir vorstellen könnte, um eine Klick-Galerie zu implementieren. Ich weiß, es gibt bessere Möglichkeiten, dies zu tun, die nicht verbindlich sind click mit jeder Taste.

Wonach ich suche: Anyway, über den ich erraten kann, welcher Button (in diesem Fall) geklickt wurde. Und bind es automatisch.

Vielen Dank. Hier ist der Code:

    <script type="text/javascript">
$(document).ready(function () {

$("#gallery-button-1").click(function () {
$("#Image").css("background-image", "url(Content/images/koala.png)");
});
$("#gallery-button-2").click(function () {
$("#Image").css("background-image", "url(Content/images/lighthouse.png)");
});
$("#gallery-button-3").click(function () {
$("#Image").css("background-image", "url(Content/images/penguins.png)");
});
$("#gallery-button-4").click(function () {
$("#Image").css("background-image", "url(Content/images/tulips.png)");
});
$("#gallery-button-5").click(function () {
$("#Image").css("background-image", "url(Content/images/5.png)");
});
$("#gallery-button-6").click(function () {
$("#Image").css("background-image", "url(Content/images/6.png)");
});
$("#gallery-button-7").click(function () {
$("#Image").css("background-image", "url(Content/images/7.png)");
});
$("#gallery-button-8").click(function () {
$("#Image").css("background-image", "url(Content/images/8.png)");
});
});
</script>

<div id="Gallery">

<div id="ButtonBox">
<span id="gallery-button-1">1</span>
<span id="gallery-button-2">2</span>
<span id="gallery-button-3">3</span>
<span id="gallery-button-4">4</span>
<span id="gallery-button-5">5</span>
<span id="gallery-button-6">6</span>
<span id="gallery-button-7">7</span>
<span id="gallery-button-8">8</span>
</div>
<div id="Image"></div>

</div>

Antworten:

Sie können HTML5 verwenden data Attribute, um das zu vereinfachen:

$(function() {
$("#ButtonBox span").on("click", function() {
$("#Image").css("background-image", "url(" + $(this).data("image") + ")");
});
});

Und dein modifiziertes HTML:

<span id="gallery-button-1" data-image="Content/images/koala.png">1</span>
...

Eine kompaktere Lösung mit einem Array:

$(function() {
var images = [
"Content/images/koala.png",
...
];

$.each(images, function(index, value) {
$("<span />").text(index + 1).appendTo("#ButtonBox");
});

$("#ButtonBox").on("span", "click", function() {
$("#Image").css("background-image", "url(" + images[$(this).index()] + ")");
});
});

Jetzt können Sie alle entfernen <span> Elemente.

Etwas wie das -

$("span[id^="gallery-button"]").click(function() {
var currentID = $(this).attr("id");
var buttonNum = currentID.substring(currentID.length - 1);
var imgURL = "Content/images/" + buttonNum + ".png";
$("#Image").css("background-image", "url(" + imgURL + ")");
});

Dies funktioniert natürlich nur mit nummerierten Bildern. Um andere Bilder zu erhalten, müssen Sie eine Möglichkeit finden, diese in Ihr Markup einzufügen, wie es oben mit der Dateneigenschaft vorgeschlagen wurde.