通过匹配 div 数据属性和选项值自动选择选项？

Question

请看看这个自动滑块 (fiddle)。选择框允许用户跳转到特定幻灯片。当滑块处于自动旋转模式时，我希望选择选项根据当前幻灯片进行更改。您是否认为可以通过获取数据属性（例如当前幻灯片的title1 并将其与选项值title1 匹配？现在选择框固定为默认选项。

<div id="searchslider">

     <div data-title="title1"class="eventslide softblue">
     <h3 class="whitetitle">Title1</h3>
     <div class="slidebackground">
     <p>text</p>
     </div>
     </div>

     <div data-title="title2" class="eventslide softblue">
     <h3 class="whitetitle">Title2</h3>
     <div class="slidebackground">
     <p>Text</p>
     </div></div>

  </div>

</div>

<button id="left">left</button>
<button id="right">right</button>

<select class="select_title">
 <option value="title1">Select</option>
 <option value="title1">Title_1</option>
 <option value="title2">Title_2</option>    
</select>

自动旋转功能：

 function autoRotate(){
  intv = setInterval(function(){
      $('#right').click();
  },10000); //Pause Time
     $('.select_title').prop('selectedIndex',0); 
 }

 autoRotate(); // start auto rotate

Answer 1

使用此代码$('.select_title').prop('selectedIndex',C+1); 而不是$('.select_title').prop('selectedIndex',0);

$( document ).ready(function() {

var intv;
var autoRotate;

var sliderplace = $('#searchslider .eventslide');
var W = sliderplace.width();
var N = sliderplace.length;
var C = 0;

$('#searchslider').width( W*N );

$('#left, #right,#auto').click(function(){

  if(this.id=='right'){

    C++;
    C = C % N;     // reset to '0' if end reached

  }else{ // left was clicked

    C--;
    if(C===-1){   // IF C turns -1 scroll to last one (N-1)
      C = N-1; 
    }

  }
  $('.select_title').prop('selectedIndex',C+1); // this line added for auto select
  $('#searchslider').stop().animate({left: -C*W }, 500 );
});

 function autoRotate(){
  intv = setInterval(function(){
      $('#right').click();
  },10000); //Pause Time
     $('.select_title').prop('selectedIndex',C+1);
}
autoRotate(); // start auto rotate

// pause hover

$('#event_rotator').on('mouseenter mouseleave', function( e ){
   var mEnt = e.type=='mouseenter';
  if(mEnt){
     clearInterval(intv);
  }else{
     autoRotate();
  }
});
$('.select_title').change(function(){

    var optionSelected = $("option:selected", this);
    var selIndex = $(this).prop("selectedIndex");
    if (selIndex == 0) return false;
    C = selIndex - 1;

     clearInterval(intv);
    if(optionSelected){
        autoRotate(); } 


   $('#searchslider').stop().animate({left: -C*W }, 500 ); 
});

});

这里http://jsfiddle.net/K3bWS/

Answer 2

尝试检查每个帧的偏移量以获取当前帧。然后读出该标题属性并相应地更改选项值

$( "#searchslider" ).promise().done(function() {
   $('#searchslider').find('.eventslide').each(function(){
    var parentLeft = $('#searchslider').offset().left;        
    var offsetX = $(this).offset().left;
    if (offsetX == 22){
        var dataAttribute = $(this).attr('data-title');
        $('.select_title').val(dataAttribute);
        console.log(dataAttribute);
    }
    });
});

http://jsfiddle.net/cYFLe/62/

Answer 3

为了使它工作，我建议在页面加载后生成这个选择字段。 jQuery 应该计算标题并为此选择字段创建一个选项。

一旦完成 - 一切都很简单。

JS

<script>
$( document ).ready(function() {
    var c=0;
    $(".eventslide").each(function(i,item)
                          {
                             $(".select_title").append('<option value="'+c+'">'+$(item).attr('data-title')+'</option>');   
                              c++;
                          });



var intv;
var autoRotate;

var sliderplace = $('#searchslider .eventslide');
var W = sliderplace.width();
var N = sliderplace.length;
var C = 0;

$('#searchslider').width( W*N );

$('#left, #right,#auto').click(function(){

  if(this.id=='right'){

    C++;
    C = C % N;     // reset to '0' if end reached

  }else{ // left was clicked

    C--;
    if(C===-1){   // IF C turns -1 scroll to last one (N-1)
      C = N-1; 
    }

  }

  $('#searchslider').stop().animate({left: -C*W }, 500 );
});

 function autoRotate(){
  intv = setInterval(function(){
      $('#right').click();
  },10000); //Pause Time
     $('.select_title').prop('selectedIndex',0);
}
autoRotate(); // start auto rotate

// pause hover

$('#event_rotator').on('mouseenter mouseleave', function( e ){
   var mEnt = e.type=='mouseenter';
  if(mEnt){
     clearInterval(intv);
  }else{
     autoRotate();
  }
});
$('.select_title').change(function(){

   var select_index=$(this).val();
   C=select_index;




   $('#searchslider').stop().animate({left: -C*W }, 500 ); 
});

});
</script>

这里是小提琴：http://jsfiddle.net/cYFLe/61/