JQuery在div中更改图像

Question

我认为我这样做并不是最好的方式。有更好的方法吗？

示例：http://www.mudquarters.com（点击“在商店中”）

我想默认为蓝色衬衫，当您单击样本时，它们会将 div 中的图像交换为适当的颜色。它们现在有点工作，但是它默认为黄色而不是蓝色，并且此方法要求我的 css 包含position: "absolute"，这会破坏我的响应式布局中该部分的背景平铺，因为它在容器外中断。

有没有办法更好地做到这一点？

CSS：

#shirt img {
    position:absolute;
}

HTML：

<ul id="swatches">
  <li><a href="#"><img src="img/BTN_Blue.gif"></a></li>
  <li><a href="#"><img src="img/BTN_Green.gif"></a></li>
  <li><a href="#"><img src="img/BTN_Red.gif"></a></li>
  <li><a href="#"><img src="img/BTN_Grey.gif"></a></li>
  <li><a href="#"><img src="img/BTN_Yellow.gif"></a></li>
</ul>

<div id="shirt" class="large-6 columns">
  <img src="img/T_Blue.png">
  <img src="img/T_Green.png">
  <img src="img/T_Red.png">
  <img src="img/T_Grey.png">
  <img src="img/T_Yellow.png">
</div>

JS：

<script>
$('#swatches li').on('mousedown',function(e){
    $('#shirt img').stop().fadeTo(300,0);
    if (e.type=='mousedown') {
        $('#shirt img').eq( $(this).index() ).stop().fadeTo(300,1);
    }
});
</script>

Answer 1

您可以尝试几件事……但我不能确定。

为了让蓝色衬衫默认显示，你能不能改变图像的顺序，把蓝色衬衫放在最后？

<div id="shirt" class="large-6 columns">
<img src="img/T_Green.png">
<img src="img/T_Red.png">
<img src="img/T_Grey.png">
<img src="img/T_Yellow.png">  
<img src="img/T_Blue.png">
</div>  

对于背景平铺，尝试将overflow:auto; 添加到#stores 的样式中

祝你好运！

Answer 2

css

.zindex { z-index: 10}

编辑

尝试使父 div 与图像一样高

javascript

    var $firstImage = $('#shirt img:first-child'); // cache
    var imageHeight = $firstImage.height();
    $firstImage.addClass('zindex');
    var $shirtImage = $('#shirt img')
    $('#shirt').height(imageHeight);
    $('#swatches li').on('mousedown',function(e){
        $shirtImage.removeClass('zindex').stop().fadeTo(300,0);
        if (e.type=='mousedown') {
            $shirtImage.eq( $(this).index() ).stop().fadeTo(300,1);
        }
    });

当屏幕很小时，看起来你根本不会改变图像大小，如果这样你总是可以将它包装在一个函数中并调用它

$(window).resize(function() {
// your code here
})

Answer 3

修复

问题 1：为了默认为蓝色衬衫，您可以在页面加载时隐藏所有其他图像：

$('#shirt img').not(':first').fadeOut(0);

问题 2： 绝对定位元素的问题是它们在流之外，所以父母无法调整它们的高度。唯一的解决方法是明确设置高度，从 James Daly 的回答中记下你需要这样的东西（在 resize 事件中以适应您的流体布局）：

$(window).resize(function() {
    $('#shirt').height($('$shirt img:first').height());
});
$(window).trigger('resize');

新方法

现在，如果您不想实施此修复程序，您可以更改您的逻辑以仅使用一个图像并通过单击样本更新其 src，从而有效地消除这两个问题，因为不需要不再使用绝对位置，您可以轻松地将默认图像设置为蓝色。这个新的实现看起来像这样：

HTML

<ul id="swatches">
  <!--Add the reference to the main img src of each link as a data-attribute-->
  <li><a href="#" data-img-src="img/T_Blue.png"><img src="img/BTN_Blue.gif"></a></li>
  <li><a href="#" data-img-src="img/T_Green.png"><img src="img/BTN_Green.gif"></a></li>
  <li><a href="#" data-img-src="img/T_Red.png"><img src="img/BTN_Red.gif"></a></li>
  <li><a href="#" data-img-src="img/T_Grey.png"><img src="img/BTN_Grey.gif"></a></li>
  <li><a href="#" data-img-src="img/T_Yellow.png"><img src="img/BTN_Yellow.gif"></a></li>
</ul>

<div id="shirt" class="large-6 columns">
  <img src="img/T_Blue.png"> <!--Set blue as default-->
</div>

jQuery

var $shirtImg = $('#shirt img');
$('#swatches li a').on('mousedown',function(e){
    var src = $(this).data('img-src');    
    if(src != $shirtImg.attr('src')){ //Check if it's not the image we have now
        $shirtImg.stop().fadeTo(150,0.8,function(){
            $(this).attr('src',src).fadeTo(150,1);
        });
    }
});