Div фокус jquery switcher не работает

Question

У меня есть простой переключатель изображения фона в слайдере.

Дефалировать изображение нормальной среды (.nenv) отображается отлично, но когда я нажимаю на просмотр окружения (.env), а затем обратно, jquery устанавливает все образы в этом div на одно и то же изображение.

Это должно быть как

<div class="sartistpicture-<?php echo $_product->getId();?> singleartist-picture" style="background:url('image1.png') no-repeat center;background-size:contain;"></div> 

<div class="sartistpicture-<?php echo $_product->getId();?> singleartist-picture" style="background:url('image2.png') no-repeat center;background-size:contain;"></div> 

<div class="sartistpicture-<?php echo $_product->getId();?> singleartist-picture" style="background:url('image3.png') no-repeat center;background-size:contain;"></div> 

Но вместо того, чтобы это

<div class="sartistpicture-<?php echo $_product->getId();?> singleartist-picture" style="background:url('image1.png') no-repeat center;background-size:contain;"></div> 

<div class="sartistpicture-<?php echo $_product->getId();?> singleartist-picture" style="background:url('image1.png') no-repeat center;background-size:contain;"></div> 

<div class="sartistpicture-<?php echo $_product->getId();?> singleartist-picture" style="background:url('image1.png') no-repeat center;background-size:contain;"></div> 

Вот PHP/JQuery:

<div class="slides-container"> 
     <?php foreach ($_productCollection as $_product): ?> 

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

        jQuery('.env').click(function(){ 
         jQuery('.singleartist-picture').removeAttr('style'); 
         jQuery('.singleartist-picture').css('background', 'url(<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA) .'/catalog/product/'. $_product->getData('enviromental'); ?>)'); 
         jQuery('.singleartist-picture').css('background-size', 'contain'); 
         jQuery('.singleartist-picture').css('background-repeat', 'no-repeat'); 
         jQuery('.singleartist-picture').css('background-position', 'center'); 
         //Buttons 
         jQuery('.env').css('color', '#009ab1'); 
         jQuery('.env').css('text-decoration', 'underline'); 
         jQuery('.nenv').css('color', 'black'); 
         jQuery('.nenv').css('text-decoration', 'none'); 
        }) 
        jQuery('.nenv').click(function(){ 
         jQuery('.singleartist-picture').removeAttr('style'); 
         jQuery('.singleartist-picture').css('background', 'url(<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA) .'/catalog/product/'. $_product->getData('normal_enviromental'); ?>)'); 
         jQuery('.singleartist-picture').css('background-size', 'contain'); 
         jQuery('.singleartist-picture').css('background-repeat', 'no-repeat'); 
         jQuery('.singleartist-picture').css('background-position', 'center'); 
         //Buttons 
         jQuery('.nenv').css('color', '#009ab1'); 
         jQuery('.nenv').css('text-decoration', 'underline'); 
         jQuery('.env').css('color', 'black'); 
         jQuery('.env').css('text-decoration', 'none'); 
        }) 
       }); 
       </script> 

     <div class="sartistpicture-<?php echo $_product->getId();?> singleartist-picture" style="background:url(<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA) .'/catalog/product/'. $_product->getData('normal_enviromental'); ?>) no-repeat center;background-size:contain;"></div> 

    <?php endforeach; ?> 
</div> 

Любые предложения? :)

Answer 1

Найдено решение. Вместо определения все класса singleartist-изображения я передал их с определенным идентификатором следующим образом:

jQuery('.sartistpicture-<?php echo $_product->getId();?>').css 

Вместо

jQuery('.singleartist-picture').css