Javascript проверяет, был ли обработчик события нажат

Я хочу отображать абзацы с помощью js, и я хочу, чтобы каждый раз пользователь нажимал кнопку «вправо», чтобы отобразить абзац, но вместо этого отображаются все параграфы. Как я могу проверить, нажал ли пользователь кнопку, чтобы я мог отображать только один следующий абзац, когда была нажата кнопка. Thanx заранее.Javascript проверяет, был ли обработчик события нажат

<style type="text/css"> 
p { 
    border:1px solid black; 
    width:100px; 
    height:30px; 
    display:none; 
} 
</style> 

<p>some text1</p> 
<p>some text2</p> 
<p>some text3</p> 
<p>some text4</p> 
<p>some text5</p> 
<input type="button" value = "left" /> 
<input type="button" value = "right" 
onclick = " 
var p = document.getElementsByTagName('p'); 
for(var i = 0; i <p.length; i++){ 
show_paragraphs(i);} 
" 
id = "right"/>

источник

2013-06-08 user2167174

Вам необходимо перевернуть каждый параграф и проверить, отображается ли предыдущий параграф, если он отображается как отображаемый как нет для предыдущего и для блока отображения, как для текущего, так и для возврата ,

вот пример кода

<html> 
<style type="text/css"> 
p { 
    border:1px solid black; 
    width:100px; 
    height:30px; 
    display:none; 
} 
</style> 

<p style="display:block">some text1</p> 
<p>some text2</p> 
<p>some text3</p> 
<p>some text4</p> 
<p>some text5</p> 
<input type="button" value = "left" /> 
<input type="button" value = "right" 
onclick = "navigate()" 
id = "right"/> 
<script> 
function navigate(){ 
var p = document.getElementsByTagName('p'); 
for(var i = 1; i <p.length; i++){ 
if( p[i-1].style.display == 'block') 
    { 
    p[i].style.display = 'block' ; 
    p[i-1].style.display ='none'; 
    return; 
    } 
} 
} 
</script> 
</html>

источник

2013-06-08 11:20:51

Отъезд Content Swapper jQuery плагин, который делает именно то, что вы пытаетесь сделать.

Или, если вы должны сделать это ваш путь, вот ваш код изменен на работу:

<!doctype html> 
<html> 
<head> 

<style type="text/css"> 
p { 
    border:1px solid black; 
    width:100px; 
    height:30px; 
    display:none; 
} 
</style> 

<script> 
var i=0, paras = document.getElementsByTagName('p'); 

function hideAllPara() { 
    for(var j=0; j<paras.length; j++) { 
     paras[j].style.display = 'none'; 
    } 
} 
</script> 

</head> 

<body> 

<p>some text1</p> 
<p>some text2</p> 
<p>some text3</p> 
<p>some text4</p> 
<p>some text5</p> 
<input type="button" value = "left" /> 
<input type="button" value = "right" onclick = "hideAllPara(); paras[i].style.display = 'block'; i = (i < paras.length-1) ? i+1 : 0;" id = "right"/> 

</body> 
</html>

Вы должны отметить, хотя, работая с инлайн событий щелчка или JavaScript никогда не рекомендуется.

В любом случае, так что каждый раз, когда вы нажимаете правую кнопку, сначала нам нужно скрыть все абзацы, а затем отобразить только тот, который вам нужен; для этого нам нужно отслеживать указатель/указатель и сбросить его, как только мы достигнем конца.

И если вы хотите, чтобы показать пункт при загрузке страницы, вы можете сделать одно из следующих действий в CSS:

р: первый-ребенок {дисплей: блок;}
р: NTH -child()/* указать любой индекс, который вы хотите показать всем выбранным абзацам на странице */
Дайте имя класса, называемое «активным», в абзац, который вы хотите показать, и объявите его в CSS как таковой; p.active {display: block;}

источник

2013-06-08 10:45:01 designcise

Вам не нужно JQuery или плагин для достижения этой цели .. – lifetimes

Так как я могу сделать это тогда & – user2167174

Отлично, спасибо. И еще один вопрос. Переменная i видна в коде внутри события , хотя мы инициализировали его в t он ? Thanx для объяснения. Я подумал о подобном алгоритме, просто не смог его реализовать. – user2167174

насчет:

var left=document.getElementById("left"); 
var right=document.getElementById("right"); 

var show=function(){ 
    var paragraphs=document.getElementsByTagName("p"); 
    var current=0; 
    var len=paragraphs.length; 
    return function(event){ 
     var button=event.target.id; 
     var direction=0; 
     var visi="visible"; 
     if(button==="left"){ 
      visi="hidden"; 
      direction=(current>0)?-1:0; 
     } else { 
      direction=(current<len-1)?1:0; 
     } 
     paragraphs[current].style.visibility=visi; 
     current+=direction; 
    }; 
}(); 

left.addEventListener("click", show); 
right.addEventListener("click", show);

jsFiddle

источник

2013-06-08 13:17:36

Javascript проверяет, был ли обработчик события нажат

ответ

Смежные вопросы