Question

我試圖在jQuery圖像輪播的圖像上連接點擊事件，以便它更新同一文檔中的選擇列表，並設置「選定」選項以匹配在輪播中點擊的項目。每個輪播圖像上的「標題」屬性與選擇列表中的至少一個選項相匹配（標題始終是唯一的）。

例如：

1）旋轉木馬圖片的標題是：圖像1，圖像2，圖像3

<div id="carousel"> 
<ul> 
    <li><img src='folder1/screenshot.jpg' title=image1 /></li> 
    <li><img src='folder2/screenshot.jpg' title=image2 /></li> 
    <li><img src='folder3/screenshot.jpg' title=image3 /></li> 
</ul> 
</div> 

2）選擇列表選項...

<select id="myThumbs"> 
    <option>image1</option> 
    <option selected="selected">image2</option> 
    <option>image3</option> 
</select> 

我現有的代碼下面，它已經將懸停事件綁定到旋轉木馬之外的預覽div。我想保持這種行爲，並添加點擊行爲以更新選項列表中的選定項目，以便它與點擊的傳送帶圖像的標題相匹配。

$(function() { 
    $("#carousel").jCarouselLite({ 
     btnNext: ".next", 
     btnPrev: ".prev", 
     visible: 6, 
     mouseWheel: true, 
      speed: 700 
    }); 
$('#carousel').show(); 

$('#myThumbs').change(function() { 
    var myImage = $('#myThumbs :selected').text(); 
$('.selectedImage img').attr('src','../wp-content/themes/mytheme/styles/'+myImage+'/screenshot.jpg'); 
}); 

    $('#carousel ul li').click(function(e) { 
    var myOption = $(this).children('img').attr('title'); 
    $('#myThumbs').addOption('Text', myOption); 
    }); 

$('#carousel ul li').hover(function(e) { 
    var img_src = $(this).children('img').attr('src'); 
    $('.selectedImage img').attr('src',img_src); 

} 
,function() { 
$('.selectedImage img').attr('src', '<?php echo $selectedThumb; ?>');}); 
}); 

Answer 1

如果你想保持1：一個選擇&你需要重置所有選擇選項，並保持只是你想要使一個圖像之間一對一的關係......

$('#carousel ul li').click(function(){ 
    var myOption = $(this).children('img').attr('title'); 
    $('#myThumbs').addOption('Text', myOption); 
    $('#myThumbs option').each(function(){ 
     if($(this).text()=myOption){ 
     $(this).attr('selected','true') 
     }else{ 
     $(this).attr('selected','false') 
     } 
    } 

該代碼尚未經過測試，因此您可能需要對其進行調整。