تغيير خلفية العنصر بواسطة النقر.

لتحقيق الهدف الذي ذكرته، يمكنك استخدام متغير لتتبع الصورة الحالية وتغييرها بعد النقر. في الكود الحالي، تقوم بتغيير الخلفية مباشرة دون أن تتبع الصورة الحالية. فيما يلي كيفية تنفيذ ذلك:

javascriptCopy code
$(document).ready(function () {
    var images = [
        'url(images/sail-boat.jpg)',
        'url(images/sad_ostateczny.jpg)',
        'url(images/twierdza_wisloujscie.jpg)'
    ];
    var currentImageIndex = 0;

    $('.right').click(function () {
        $('.zur-gda-img').css('background', images[currentImageIndex]);
        currentImageIndex = (currentImageIndex + 1) % images.length;
    });
});

هذا الكود يستخدم مصفوفة من الصور ومتغير لتتبع الصورة الحالية، ثم يقوم بتغيير الصورة عند النقر على الزر.

بالطبع! في الكود السابق، قمت بتعريف مصفوفة images تحتوي على عناوين الصور التي تريد استخدامها كخلفية للعنصر zur-gda-img. ثم، قمت بتعريف متغير currentImageIndex لتتبع الصورة الحالية المعروضة.

عند النقر على العنصر .right، يتم تغيير خلفية العنصر zur-gda-img لتكون الصورة في موضع currentImageIndex في المصفوفة images. بعد ذلك، يتم زيادة قيمة currentImageIndex بمقدار واحد باستخدام عبارة (currentImageIndex + 1) % images.length، وهذا يحول دوريًا بين الصور المتاحة.

بهذه الطريقة، يمكنك الحصول على تغيير الصور تلقائيًا بعد النقر، حيث سيتم عرض الصورة التالية في كل مرة تنقر فيها على العنصر.