Question

问题出在这里

我有一个幻灯片演示，其中包含3张幻灯片，这些幻灯片在10秒后由插件生成，因此我无权访问html文件。

<ul>
  <li data-index="rs-101">
  <li data-index="rs-102">
  <li data-index="rs-103">
</ul>

 <div class="content1">
   content1
 </div>
 <div class="content2">
   content2
 </div>
 <div class="content3">
   content3
 </div>

此滑块位于屏幕顶部，现在我想根据幻灯片更改屏幕底部：

如果选择了rs-101：请执行此操作如果选择rs-102： ..

我发现这不起作用：

function Content1(){ 
    if ( $('html').attr('data-index') == 'rs-101' ) {
    var x1 = document.getElementById("content1"); 
    x1.style.display = "block";
} else {
    x1.style.display = "none";
} 
function Content2(){ 
    if ( $('html').attr('data-index') == 'rs-102' ) {
    var x1 = document.getElementById("content1"); 
    x2.style.display = "block";
} else {
    x2.style.display = "none";
} 
function Content3(){ 
    if ( $('html').attr('data-index') == 'rs-103' ) {
    var x3 = document.getElementById("content1"); 
    x3.style.display = "block";
} else {
    x3.style.display = "none";
}

请咨询。

Answer 1

当检测到更改时，可以使用类似https://stackoverflow.com/a/18311216/9785689的方法监视列表的更改，请调用单个函数changeContent（）。如果这不起作用，那么您需要一种方法来监听插件中的自动更改（我会咨询作者或插件）。

function ChangeContent(){
  var data = $('html').attr('data-index');
  if ( data == 'rs-101' ) {
    var x1 = document.getElementById("content1"); 
    x1.style.display = "block";
  } else {
    x1.style.display = "none";
  } 

  if ( data == 'rs-102' ) {
    var x1 = document.getElementById("content1"); 
    x2.style.display = "block";
  } else {
     x2.style.display = "none";
  }

  if ( data == 'rs-103' ) {
    var x3 = document.getElementById("content1"); 
    x3.style.display = "block";
  } else {
    x3.style.display = "none";
  }
}

属性处于活动状态时如何显示内容

1 个答案: