Question

我正在寻找一种方法来显示div正在被切换，并带有一个单独的div指示符“.bars”

我已尝试if语句并在指标“.bars”中添加了类以更改其属性...

指标“.bars”有三个子div，每个div代表一个切换的div 幻灯片......

if($(".one")).show(){
$(".bars div").css(change it here);
}
//what I am confused about is that I can change other html elements this way 
like the parent div which is indicator ".bar" but I cant seem to change its children...
<div class="bars">
<div></div>
<div></div>
<div></div>
</div>

这是我的codepen链接，显示我遇到困难的地方 http://codepen.io/gebrutommy/pen/ZpGZRv?editors=0010

Answer 1

如果我理解你正在尝试做什么......我为你添加了一些代码focusNextDiv函数来添加一个用于突出显示的类：

JS：

function focusNextDiv() {
  $(".gallery").hide();
  divs[index].toggle();

  // Added JS
  var bars = $('.bars div').removeClass('current');
  $(bars.get(index)).addClass('current');
  // End of Added JS

  index++; 
  if (index === divs.length) {
    index = 0;
  }
}

CSS：

.bars div.current {
  background-color: red;
}

HTML：

  <div class="bars flex row">
    <div class="current"></div>
    <div></div>
    <div></div>
  </div>

这可以清理，但我只是想确保我正确理解问题。这更接近你想要的吗？

此代码使用您的index变量，并在.bars div中查找具有相同索引的子项，然后只为其添加.current类。我手动将相同的.current类添加到您的标记中，因此在页面加载时，第一个.bar div显示为已选中。

Working Codepen

如何获得一个div表示，另一个div正在切换（以幻灯片方式显示）？

1 个答案: