使用单选按钮更改jquery滑块内的图像src

好吧，所以基本上我试图在jQuery图像滑块内部构建“车辆颜色配置器”。我希望人们能够点击一个样式化的单选按钮，并相应修改该特定幻灯片。这是我下面的代码，但我不能让图像改变......使用单选按钮更改jquery滑块内的图像src

HTML

<div data-iview:image="features/design/design_5.1.jpg" id="config"> 
      <div class="iview-caption design5" data-transition="fade"> 
       <h1>Colour</h1><h2>the town...</h2> 
       <p>Blah blah fish paste</p> 
       <span> 
       <input type="radio" name="config" value='design_5.1.jpg' /> 
       <input type="radio" name="config" value='design_5.2.jpg' /> 
       <input type="radio" name="config" value='design_5.3.jpg' /> 
       <input type="radio" name="config" value='design_5.4.jpg' /> 
       <input type="radio" name="config" value='design_5.5.jpg' /> 
       <input type="radio" name="config" value='design_5.6.jpg' /> 
       <input type="radio" name="config" value='design_5.7.jpg' /> 
       <input type="radio" name="config" value='design_5.8.jpg' /> 
       </span> 
      </div> 
</div>

JQUERY

imgFldr = 'features/design/'; 

$("input[type='radio']").click(function() { 
    $('#config').attr('data-iview', imgFldr+this.value); 
});

来源

2013-04-10 user2224215

究竟是什么'data-iview：image'？ – 2013-04-10 16:08:21

这data-iview:image被转换为在运行时的CSS背景属性，因此它改变dinamically不会影响滑块上的任何东西

来源

2013-04-10 16:19:11

感谢迄今为止所有人的回应！所以大卫你说他们的方式Iview称它的幻灯片基本上是背景图片？ – user2224215 2013-04-11 07:32:38

您错过'：image'，代码是这样的

$(function(){ 
var imgFldr = 'features/design/'; 
$("input[type='radio']").click(function() { 
$('#config').attr('data-iview:image', imgFldr+this.value); 
});})

来源

2013-04-10 16:19:44 bluewind

感谢您的支持，但不幸的是它仍然无法正常工作:-( – user2224215 2013-04-11 07:34:01

我设法找到基于以下不同的解决办法：虽然

//The color picker div  
<div class="picker" data-bkgnd="/content/images/someimg.jpg"></div> 

//The container for your product image 
<div class="productDisplay"></div> 

<script type="text/javascript"> 


$(document).ready(function(){ 
    $(".picker").click(function(){  
     //Load background string from data of clicked element 
     var bVal = $(this).attr('data-bkgnd'); 
     //Set display's background to retrieved background string 
     $(".productDisplay").hide().css({'background-image': "url(" + bVal + ")"}).show(); 
    }); 
}); 

</script>

感谢所有帮助！

来源

2013-04-11 10:32:43 user2224215

使用单选按钮更改jquery滑块内的图像src

回答

相关问题