Question

我对Javascript有疑问。您可以在

下找到我的HTML标记

var userIds = [String]()

如果用户单击按钮向下滑动以使用纯javascript删除该类，则可以执行哪些操作＆＃39;将此设置为下一个幻灯片元素？

Answer 1

以下内容将起作用。使用许多javascript DOM属性和方法。由于连字符在函数名称中无效，因此您需要稍微更改函数的名称。我用下划线代替了。

＆＃13;

function slide_down(){
    var elems = document.querySelectorAll(".slide");
    var curr = document.querySelector(".active");
    curr.classList.remove("active");
    if(curr.nextElementSibling)
        curr.nextElementSibling.classList.add("active");
    else
        elems[0].classList.add("active");
}

function slide_up(){
    var elems = document.querySelectorAll(".slide");
    var curr = document.querySelector(".active");
    curr.classList.remove("active");
    if(curr.previousElementSibling)
        curr.previousElementSibling.classList.add("active");
    else
        elems[elems.length-1].classList.add("active");
}

＆＃13;

.active{background-color:red}

＆＃13;

<div class="slides">
  <div class="slide active" id="one">1</div>
  <div class="slide" id="two">2</div>
  <div class="slide" id="third">3</div>
  <div class="slide" id="fourth">4</div>
</div>

<button onclick="slide_down()">
  Next slide
</button>

<button onclick="slide_up()">
  Previous slide
</button>

＆＃13;

Answer 2

您可以使用单个功能，将''.join('%3s' % x for x in range(100))元素设置为class元素<button>和"prev"，点击"next" button即可; .className，.getElementsByClassName()，.nextElementSibling

＆＃13;

.previousElementSibling

＆＃13;

.active {
  color: green;
}

＆＃13;

Answer 3

这是我写的一个例子。 Jasmiec在我结束之前回答，我真的很喜欢这个例子中使用的一些不同的方法。如前所述，您需要更改函数的名称，因为连字符会使名称无效。

<div class="slides">
  <div class="slide active" id="one"></div>
  <div class="slide" id="two"></div>
  <div class="slide" id="three"></div>
  <div class="slide" id="four"></div>
</div>

<button onclick="slideDown()">
  Next slide
</button>

<button onclick="slideUp()">
  Previous slide
</button>

<script>
var slides = ["one", "two", "three", "four"]
function slideDown() {
    var element = document.getElementsByClassName('active')[0];
    var index = slides.indexOf(element.id) + 1;
  if (index < slides.length) {
    element.className = "slide";
    document.getElementById(slides[index]).className = "slide active";
  }
}

function slideUp() {
    var element = document.getElementsByClassName('active')[0];
    var index = slides.indexOf(element.id) - 1;
  if (index >= 0) {
    element.className = "slide";
    document.getElementById(slides[index]).className = "slide active";
  }
}
</script>

将类激活设置为下一个幻灯片元素

3 个答案: