javascript select spesified element on click event

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 выход будет ---> 2 ----> снова ----> 6 --- -> снова ----> 8 ----> и снова ----> 10

.prev также ---> от 10 до 8 от 8 до 6 от 6 до 4 от 4 до 2 от 2 до 0

так, как именно решить эту проблему?

Answer 1

Один вопрос в том, что вы хотите, чтобы конечный выход устремляется к нулю, но вы не имеете элемент с этим содержимым, так что вы нужно добавить его. Независимо от того, вот какой-то рабочий код.

Я использовал идентификаторы для кнопоки prev, потому что это имеет смысл, и я выделил код, поэтому его немного легче читать. Я также переместил выделение 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>