为什么 getElementById() 不能在 owl-carousel 中工作？答案

【问题标题】：Why don't getElementById() work inside the owl-carousel?为什么 getElementById() 不能在 owl-carousel 中工作？
【发布时间】：2020-12-04 15:46:35
【问题描述】：

完整代码在这里：jsfiddle

我这样定义一个标准的 owl-carousel 幻灯片：

<div class="owl-carousel owl-theme">
    <div class="item"><h4 id="test">1</h4></div>
    <div class="item"><h4>2</h4></div>
</div>

js:

$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
});

window.setCounter = function(){
  document.getElementById('test').innerHTML = "test";
  console.log('test');
};

它有效。

现在我想在文档加载时更改test id 中的文本。

所以我在 HTML 文档中调用函数。

<script>
$(document).ready(function(){
       setCounter();
});
</script>

在这段代码中，owl-carousel 有效； console.log 有效，但 getElementById 无效。我该如何解决？

我的意思是为什么<h4 id="test">1</h4> 中的文本在调用setCounter() 后没有改变？

【问题讨论】：

您的代码完全按照您的要求执行。如果您查看输出，轮播项目居中 - 这意味着您更改的项目不在视野范围内（远离屏幕左侧），并且已更改。将轮播项目左对齐，您会看到变化。
另外，由于 owl 正在克隆节点，因此 id 正在被复制 - 这是一个禁忌。
@RandyCasburn 是的。如果我错误循环它的工作原理。但我想要一个循环，所以解决方案是使用唯一的类而不是 id...有更好的解决方案吗？

标签： javascript owl-carousel

【解决方案1】：

创建唯一 ID 或类的选项似乎不存在，但没关系。您可以按照下面的方法解决它。

HTML：

<div class="owl-carousel owl-theme">
    <div class="item"><h4 class="test">1</h4></div>
    <div class="item"><h4>2</h4></div>
</div>

您可以获得已创建元素的集合。索引 0 是第一个元素，1 是第二个元素，依此类推，并相应地设置 innerHTML：

window.setCounter = function(){
  var textLines = document.getElementsByClassName('test');
  textLines[0].innerHTML = "test";
  textLines[1].innerHTML = "test2";
  textLines[2].innerHTML = "test3";
  // etc...
};

【讨论】：