Question

好吧基本上我试图在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);
});

Answer 1

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

Answer 2

你想念＆＃39;：图像＆＃39;，代码就像这样

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

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

感谢所有的帮助！

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

3 个答案: