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

请看一下这个自动滑块（）。选择框允许用户跳转到特定幻灯片。当滑块处于自动旋转模式时，我希望选择选项根据当前幻灯片进行更改。您认为可以通过获取当前幻灯片的数据属性（例如

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>

使用此代码

$（'.select_title'）.prop（'selectedIndex'，C+1）；

而不是

$（'.select_title'）.prop（'selectedIndex'，0）；

---

在这里

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

一旦完成了这一步，一切都很简单

JS

$（文档）.ready（函数（）{
var c=0；
$（“.eventslide”）。每个（功能（i，项）
{
$（“.select_title”）.append（“”+$（item.attr（'data-title'）+“”）；
C++；
});
var-intv；
自旋转var；
var sliderplace=$（“#searchslider.eventslide”）；
var W=sliderplace.width（）；
var N=滑块位置长度；
var C=0；
$（'#searchslider'）。宽度（W*N）；
$（左、右、自动）。单击（函数（）{
if（this.id=='right'）{
C++；
C=C%N；//如果达到结束，则重置为“0”
}否则{//left已被单击
C--；
如果（C==-1）{//如果C转动-1，滚动到最后一个（N-1）
C=N-1；
}
}
$（'#searchslider'）.stop（）.animate（{left:-C*W}，500）；
});
函数自动旋转（）{
intv=setInterval（函数（）{
$（“#右”）。单击（）；
}，10000）；//暂停时间
$（'.select_title'）.prop（'selectedIndex'，0）；
}
autoRotate（）；//开始自动旋转
//暂停悬停
$（“#事件旋转器”）。on（'mouseenter mouseleave'，函数（e）{
变量=e.type=='mouseenter'；
如有（修订）{
国际电视台；
}否则{
自动旋转（）；
}
});
$（'.select_title'）.change（函数（）{
var select_index=$（this.val（）；
C=选择索引；
$（'#searchslider'）.stop（）.animate（{left:-C*W}，500）；
});
});

---

下面是提示：

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

$( "#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);
    }
    });
});

$( 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 ); 
});

});

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

$( "#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);
    }
    });
});