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：first-child {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 个答案: