0

段落の可視性をなしに変更するか、javascript を使用して動的に非表示にします。4 つの段落があり、1 つだけを表示したいです。ユーザーが右ボタンをクリックすると、前の段落ではなく次の段落が表示されます。左ボタンの場合、それから別の方法.しかし、私のイベントハンドラーは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 条件内で eventhandler を割り当てています。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 に答える