Question

我遇到了需要获取 spesified 元素的问题。

所以，这是我的代码：

<p class="prev">prev</p>
<p class="next">next</p>

<ul class="parent">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
</ul>

document.querySelectorAll(".next")[0].addEventListener("click", function() {
    var x = querySelectorAll(".parent li")[2].innerHTML;
    alert(x);  // output 2

});

document.querySelectorAll(".prev")[0].addEventListener("click", function() {
    var x = querySelectorAll(".parent li")[2].innerHTML;
    alert(x);  // output -2

});

所以，如果我点击 .next ，输出将会是---＆gt; 2 ----＆gt;再次----＆gt; 6 ----＆gt;再次----＆gt; 8 ----＆gt;再次----＆gt; 10

.prev 也---＆gt;从10到8从8到6从6到4从4到2从2到0

那么，究竟如何解决这个问题？

Answer 1

一个问题是你希望结束输出变为零，但你没有元素与那个内容，所以你需要添加它。无论这里有一些工作代码。

我已经为next和prev按钮使用了id，因为这更有意义，而且我已经将代码分离出来，因此它更容易阅读。我还将li选项移到了函数之外，因为你只需要选择一次，而不是每次调用其中一个函数。请注意，这会记录到控制台而不是警报，因为它可以更轻松地测试代码。

var next = document.getElementById('next');
var prev = document.getElementById('prev');
var lis = document.querySelectorAll(".parent li");

next.addEventListener('click', advance, false);
prev.addEventListener('click', retreat, false);

var index = 0;

function advance() {
    if (index + 2 < lis.length - 1) {
        index += 2;
        console.log(lis[index].innerHTML);
    }
}

function retreat() {
    if (index > 0) {
        index -= 2;
        console.log(lis[index].innerHTML);
    }
}

DEMO

Answer 2

以下是您要查找的代码：

var index = 0;

document.querySelectorAll(".prev")[0].addEventListener("click", function() {
  index = index - 2;
  if (index < 0) { // don't go below 0
    index = 0; // correct it
  } else {
    // Goto Previous Element
    var x = document.querySelectorAll(".parent li")[index].innerHTML;
    alert(x);
  }
});

document.querySelectorAll(".next")[0].addEventListener("click", function() {
  var index_max = document.querySelectorAll(".parent li").length - 1;
  index = index + 2;
  if (index > index_max) { // don't go futher than elements exist
    index = index_max; // correct it
  } else {
    // Goto Next Element
    var x = document.querySelectorAll(".parent li")[index].innerHTML;
    alert(x);
  }
});

<p class="prev">prev</p>
<p class="next">next</p>
<ul class="parent">
  <li>0</li>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
</ul>

javascript在点击事件中选择spesified元素

2 个答案: