Div 后台 jquery 切换器失败

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-picture 类，而是使用特定的 id 传递它们，如下所示：

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

代替

jQuery('.singleartist-picture').css