0

私はサイトで作業しており、javascript を使用してテキストをスクロールしています。私はカウンターとその機能を使用していますが、条件ステートメントを通過すると、divが隠されたり、一貫したりしません。なぜこれが起こっているのかについて何か考えはありますか？

ありがとう！

html:

    <div id="arrow2">
        <a id="arrowRight" href="javascript:ltoggle('box');"><img alt="Arrow Right" height="auto" src="images/rightarrow.png"></a>
    </div>

    <div id="content">
        <div class="boxPosition" id="box1">
            <p>This is a destination wedding.  Come early, and stay late!</p>
        </div>

        <div class="boxPosition" id="box2">
            <p>Festivities will start on Friday, August 16th.</p>
        </div>

        <div class="boxPosition" id="box3">
            <p>The wedding will be on Sunday, August 18th late in the day, so you should plan to take Monday off!</p>
        </div>

        <div class="boxPosition" id="box4">
            <p>a</p>
        </div>

        <div class="boxPosition" id="box5">
            <p>b</p>
        </div>

        <div class="boxPosition" id="box6">
            <p>c</p>
        </div>

        <div class="boxPosition" id="box7">
            <p>d</p>
        </div>

        <div class="boxPosition" id="box8">
            <p>e</p>
        </div>

js:

    var counter = 1;
    var numBoxes = 8;

    function toggle(divName){
counter++
var ele = document.getElementById(divName + counter);
console.log(divName + counter);

if(ele.style.display == "block"){
    ele.style.display = "none";
}
else{
    ele.style.display = "block";
}
if(counter==numBoxes){
    counter = 0;
}

    }
4

2 に答える 2

1

まず、画像リンク「javascript:ltoggle('box');」にあるゲート「ltoggle」をすぐに使用します。未定義です。「トグル」だけでよいようです。

タグを次のように変更することをお勧めします。

    <a id="arrowRight" href="" onClick="toggle('box');return false;">

第 2 に、JavaScript は HTML 自体によって設定されたスタイルをすぐには認識しません。したがって、この行は最初は常に false になります。これはあなたの「矛盾」の問題です：

    if(ele.style.display == "block")

これを修正するには、js が既に設定されている CSS スタイルを見つけるために使用できる呼び出しがあると思います。それ以外の場合は、js で設定します。この投稿を確認してください: Get a CSS value with JavaScript .

それらの両方に答えれば、このことはうまくいくかもしれません。

于 2013-01-31T19:51:34.890 に答える
0

すぐにわかる 2 つのこと: 後にセミコロンがありません。アンカー hrefではなくcounter++参照しています。javascript:ltoggle('box')javascript:toggle('box')

それらを変更すると修正されますか？そうでない場合は、問題を再現する JSFiddle をセットアップして、詳しく調べていただけませんか?

于 2013-01-31T19:44:20.227 に答える