3

単純なトグルディスプレイをテストしますが、最初にディスプレイをトグルするには2回クリックする必要があります。その後、それは1つでそれを行います。

<html>
<head>
<style>
#carousel{border:2px solid blue;
width:1280px;
height:720px;}

#p2{visibility:hidden;}

#p1{display:block;}

#btn{position:absolute;
    top:2000px;}
</style>

<script src="mainScript.js"></script>
</head>

<body>

<div id="carousel">
    <img id="p1" src="pic1.jpg">
    <img id="p2" src="pic2.jpg">
</div>

<button type="button" id="button" onclick="clickEvent()">Click</button>

</body>
</html>

そして、これが私のjavascriptです：

function clickEvent(){
var p = document.getElementById("p1");
if(p.style.display == "block")
    p.style.display = "none";
else
    p.style.display = "block";
}

これについて私が見つけた他のすべての質問はjQueryに関連していたため、私はjQueryを使用していないことに注意してください。

4

5 に答える 5

5 
function clickEvent(){
var p = document.getElementById("p1");
if(p.style.display == "none")
    p.style.display = "block";
else
    p.style.display = "none";
}

物事を少し単純化することもできます。

p.style.display = p.style.display == "none" ? "block" : "none";
于 2012-12-31T16:22:58.657 に答える
1

デフォルトの表示属性は「インライン」であるため、ロジックはこれを考慮していません。最初の実行でブロックを変更しているため、引き続き表示され、2回目のクリックで非表示になります（表示をなしに設定）

于 2012-12-31T16:22:27.983 に答える
1

上記のコメントに投稿された以前のフィドルの更新があります。ダブルクリックをさらにテストした後も、以前のフィドルで同じ問題が発生しました。

ステップスルー後、初期表示値はでは""なく戻ってきblockます。セクションで設定した値を取得しない理由はわかりません<head></head>が、次のようにインライン化すると次のようになります。

<img id="p1" src="pic1.jpg" style="display: none;" />

ボタンを1回クリックするだけで、最初は正しく機能します。

これは、これを示す私の新しい更新されたフィドルです。

このセクションでスタイリングを行う理由について詳しく見ていきます<head></head>が、今のところ、ここに簡単な（そして半粗い）修正があります。

これがお役に立てば幸いです。

于 2012-12-31T16:40:40.570 に答える
0

あなたの答え

    function clickEvent(){
    var p = document.getElementById("p1");
    if(p.style.display === "block")
        p.style.display = "none";
    else
        p.style.display = "block";
    }

同じ問題が発生している条件を変更しました。これは、要素のCSSスタイルを実行する注文コードがすでに「ブロック」であったことを認識し、要素の表示が「なし」であるかどうかを確認してから、ブロックの表示を実行しました。 、最初にクリックしたときに表示が「なし」に変更され、2回目に表示がブロックに変更されたので、説明が明確だったと思います。

于 2021-11-21T10:55:11.433 に答える
-2

同じ問題は、置き換えるだけで解決できます 。最初にトグルボタンをダブルクリック"block" : "none";する?"none" : "block"; 必要はなく、シングルクリックで機能します。

于 2016-11-28T10:22:49.207 に答える