0

我想使用javascript将段落可见性更改为无或动态隐藏。我有4个段落，我只想显示一个。如果用户单击右键，则应显示下一个段落而不是前一个段落。如果左键，然后是另一种方式。但我的事件处理程序似乎没有在 paragrap_switch 函数内响应。请帮助我

HTML

<head>
<style>
    p{
        border:1px solid black;
        width:20%;
        display:none;
    }
    input{
        width:40px;
    }
 </style>
</head>
<body>
<p class="paragraph">TEXT 1</p>
<p class="paragraph">TEXT 2</p>
<p class="paragraph">TEXT 3</p>
<p class="paragraph">TEXT 4</p>

<input type = "button" value = "left"  class = "button"/>
<input type = "button" value = "right" class = "button"/>

和 Javascript

function paragraph_switch (){
var paragraphs = document.getElementsByClassName('paragraph');
var buttons = document.getElementsByClassName('button');
for(var i = 0;i < paragraphs.length; i++){
    if(i >= 0){
    if(buttons[0].onclick = function(){
        paragraphs[i].style.display = "none";
        paragraphs[i+1].style.display = "block";
        i++;
    }
    else if(buttons[1].onclick = function(){
        paragraphs[i].style.display = "none";
        paragraphs[i-1].style.display = "block";
        i--;
    }
    }
}
}
4

1 回答 1

0

我不确定你的代码在做什么。您在 if 条件内分配事件处理程序。我已经使用 jQuery 实现了您的要求。这是jsfiddle。 http://jsfiddle.net/DyZf2/

这是js代码。

$("p:first").show();
$("#left").click(function(){
    $("p:visible").hide().prev().show();
});

$("#right").click(function(){
    $("p:visible").hide().next().show();
});

您可能必须修改代码以确保在隐藏当前段落之前存在下一个/上一个段落。

于 2013-06-04T11:14:55.190 回答