2013-04-10 86 views
1

好吧,所以基本上我試圖在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); 
}); 
+0

究竟是什麼'data-iview:image'? – 2013-04-10 16:08:21

回答

0

data-iview:image被轉換爲在運行時的CSS背景屬性,因此它改變dinamically不會影響滑塊上的任何東西

+0

感謝迄今爲止所有人的迴應!所以大衛你說他們的方式Iview稱它的幻燈片基本上是背景圖片? – user2224215 2013-04-11 07:32:38

0

您錯過':image',代碼是這樣的

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

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

0

我設法找到基於以下不同的解決辦法:雖然

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

感謝所有幫助!