Javascript 检查是否已单击事件处理程序答案

【问题标题】：Javascript check if event handler has been clickedJavascript 检查是否已单击事件处理程序
【发布时间】：2013-06-08 21:17:36
【问题描述】：

我想在 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"/>

【问题讨论】：

标签： javascript paragraphs

【解决方案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>

【讨论】：

【解决方案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:first-child {display: block;}
p:nth-child() /* 指定要显示页面上所有选定段落的索引 */
为您希望显示的段落指定一个名为“active”的类名，并在 CSS 中这样声明； p.active {显示：块；}

【讨论】：

那么我该怎么做&
太好了，谢谢。还有一个问题。变量 i 在事件内的代码中是可见的，尽管我们在中对其进行了初始化？谢谢你的解释。想到了一个类似的算法，就是实现不了
是的，因为该变量是在全局范围内声明的，这意味着它在窗口的任何位置都可见（当然，直到它在同一个文档中）。你也可以像这样访问它：window[i]

【解决方案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

【讨论】：