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

【问题标题】：Change image src inside jquery slider using radio buttons使用单选按钮更改 jquery 滑块内的图像 src
【发布时间】：2013-04-10 16:03:32
【问题描述】：

好的，所以基本上我试图在 jquery 图像滑块内构建一个“车辆颜色配置器”。我希望人们能够单击样式化的单选按钮并相应地修改特定的幻灯片 img 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);
});

【问题讨论】：

data-iview:image 到底是什么？

标签： jquery html html5-data

【解决方案1】：

data-iview:image 在运行时被转换为 css 背景属性，因此动态更改它不会影响滑块上的任何内容

【讨论】：

感谢大家迄今为止的所有回复！所以大卫，你是说 Iview 称其幻灯片的方式基本上是背景图片？

【解决方案2】：

你错过了':image'，代码是这样的

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

【讨论】：

感谢您，但不幸的是它仍然无法正常工作:-(

【解决方案3】：

我设法根据以下情况找到了不同的解决方案：

    //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>

感谢大家的帮助！

【讨论】：