Изменение образа к другому по щелчку

Мы в настоящее время формируется изображение внутри держателя (ч-элемента), как показано ниже:Изменение образа к другому по щелчку

<div class="ch-item ch-img-1" style="background: url(<?php echo get_template_directory_uri(); ?>/images/image1.jpg);">

Если это возможно, мы хотели бы сделать это изменение образа к другому при нажатии и повторите этот процесс шесть раз, поэтому каждый раз, когда он нажимается, он изменяется на другое изображение.

Мы будем очень признательны за любую помощь. Спасибо!

источник

2015-05-04 Joe

Если вы не хотите страницу, чтобы перезагрузить после каждого щелчка вам нужно использовать JavaScript, а не PHP. – Jessica

Добро пожаловать в SO. Как упоминает @Jessica, тип функции, которую вы ищете, - это скрипты на стороне клиента, JavaScript, а не сценарии на стороне сервера, выполняемые PHP. Пожалуйста, напишите, какой код вы пробовали в JS, чтобы мы могли с этим помочь. – Twisty

или смесь обоих, сервера и клиента, но это еще одна история;) –

Это один из способов сделать это, используя только JavaScript:

// Counter to keep track of which the current image is 
var counter = 0; 

// List of images 
var images = [ 
    'http://cdn.cutestpaw.com/wp-content/uploads/2011/11/Seemly-l.jpg', 
    'http://cdn.cutestpaw.com/wp-content/uploads/2011/11/Handsome-l.jpg', 
    // Add more images here 
]; 

window.onload = function() { 
    // Get the container div 
    var gallery = document.getElementById('gallery'); 

    // Run updateImage function on click 
    gallery.addEventListener('click', updateImage); 

    // Run updateImage on start 
    updateImage();  
} 

function updateImage() { 
    // Get the container div 
    var gallery = document.getElementById('gallery'); 

    // Set background image  
    gallery.style.backgroundImage = 'url(' + images[counter] + ')'; 

    // Update counter 
    counter++; 

    // Remove old class name 
    if (counter == 1) { // Remove last 
     gallery.className = gallery.className.replace(
      ' ch-img-' + images.length, 
      '' 
     ); 
    } else { // Remove previous 
     gallery.className = gallery.className.replace(
      ' ch-img-' + (counter - 1), 
      '' 
     ); 
    } 

    // Add new class name 
    gallery.className = gallery.className + ' ch-img-' + (counter); 

    // Reset counter when at the end of the images list 
    if (counter == images.length) { 
     counter = 0; 
    } 
}

А вот JSFiddle попробовать его:

https://jsfiddle.net/0tg6up0o/14/

источник

2015-05-04 21:25:59 Nixxxon

Изменение образа к другому по щелчку

ответ

Смежные вопросы