Question

我正在尝试将jQuery图像轮播图像上的click事件挂钩，以便它更新同一文档中的选择列表，并设置“selected”选项以匹配在轮播中单击的项目。每个轮播图像上的“标题”属性与选择列表中的至少一个选项匹配（标题始终是唯一的）。

例如：

1）轮播图像标题是：image1，image2，image3

<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：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')
       }
     }

该代码尚未经过测试，因此您可能需要对其进行调整。

jQuery轮播单击更新选择列表中的选定项目？

1 个答案: