Javascript檢查事件處理程序是否已單擊

Question

我想在js的幫助下顯示段落，並且我希望每次用戶單擊“向右”按鈕以顯示段落時，而是顯示所有段落。 如何檢查用戶是否單擊了按鈕，所以單擊按鈕時下一段只能顯示一個。 提前感謝。

<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"/>

Answer 1

您需要在每個參數上進行迭代，並檢查是否顯示了上一個參數；如果顯示為上一個參數，則將其設置為不顯示；對於當前顯示塊，將其設置為不顯示，然后返回。

這是示例代碼

<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>

Answer 2

查看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中執行以下任一操作：

p：第一個孩子{display：block;}
p：nth-child（）/ *指定希望在頁面上顯示所有選定段落的索引* /
給要顯示的段落命名為“ active”，並在CSS中聲明它； p.active {display：block;}

Answer 3

關於什么：

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

Javascript檢查事件處理程序是否已單擊

問題描述

3 個解決方案

解決方案1
1 已采納 2013-06-08 11:20:51

解決方案2
0 2013-06-08 10:45:01

解決方案3
0 2013-06-08 13:17:36

Javascript檢查事件處理程序是否已單擊

問題描述

3 個解決方案

解決方案1 1 已采納 2013-06-08 11:20:51

解決方案2 0 2013-06-08 10:45:01

解決方案3 0 2013-06-08 13:17:36

解決方案1
1 已采納 2013-06-08 11:20:51

解決方案2
0 2013-06-08 10:45:01

解決方案3
0 2013-06-08 13:17:36