使用单选按钮更改jquery滑块内的图像源代码

lrl1mhuk  于 2023-03-17  发布在  jQuery
关注(0)|答案(3)|浏览(188)

好的,所以基本上我试图建立一个“车辆颜色配置器”内的jquery图像滑块。我希望人们能够点击一个样式单选按钮,并有特定的幻灯片img源代码进行相应的修改。这是我的代码如下,但我不能得到的图像改变...
超文本标记语言

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

查询

imgFldr = 'features/design/'; 

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

j5fpnvbx1#

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

mwecs4sa

mwecs4sa2#

您错过了“:image”,代码如下所示

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

vsnjm48y3#

我设法找到了一个不同的解决方案,基于以下内容:

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

相关问题