3

以下は、divを新しいdivに置き換えるために機能します...

<div id = "div1" style="display:block" onclick = "replace()"><img src="1.jpg" /></div>

<div id = "div2" style="display:none"><img src="2.jpg" /></div>

<script type = "text/javascript">
function replace() {
document.getElementById("div1").style.display="none";
document.getElementById("div2").style.display="block";
}

</script>

私が理解できないのは、これを機能させる方法です。クリックdiv2すると、などに置き換えられますdiv3。

つまり、クリックするたびに div を複数回置き換えたいと考えています。これについて最善の方法は何ですか？私は初心者なので、上記が良いスタートかどうかはわかりません。

ありがとう！

4

2 に答える 2

3

より一般的な関数を作成できます。

function replace( hide, show ) {
  document.getElementById(hide).style.display="none";
  document.getElementById(show).style.display="block";
}

次に、多くの div を作成し、同じ関数を使用できます。

<div id = "div1" style="display:block" onclick = "replace('div1','div2')">...</div>
<div id = "div2" style="display:none" onclick = "replace('div2','div3')">..</div>
<div id = "div3" style="display:none" onclick = "replace('div3','div4')">..</div>
...
于 2012-05-21T14:50:41.367 に答える
2

この回答では、いくつかのベスト プラクティスを提案します。

  • スタイル プロパティの代わりにクラスを使用してください。これはブラウザにとって非常に便利です。
  • インライン イベント ハンドラを使用しないでください。以下の例を参照してください。
  • 探しているのは「置換」ではなく、「トグル」です。
  • イベントバブリングを使用することをお勧めします。このようにして、すべての div のコンテナーに単一のイベントを追加すると、これに取り組むことができます。

では、例を示します。

HTML:

<div id="container">
    <div id="div1">..</div>
    <div id="div2" class="hidden">..</div>
    <div id="div3" class="hidden">..</div>
</div>

JS:

// Notice how I declare an onclick event in the javascript code
document.getElementById( 'container' ).onclick = function( e ) {

    // First, get the clicked element
    // We have to add these lines because IE is bad.
    // If you don't work with legacy browsers, the following is enough:
    //     var target = e.target;
    var evt = e || window.event,
        target = evt.target || evt.srcElement;

    // Then, check if the target is what we want clicked
    // For example, we don't want to bother about inner tags
    // of the "div1, div2" etc.
    if ( target.id.substr( 0, 3 ) === 'div' ) {

        // Hide the clicked element
        target.className = 'hidden';

        // Now you have two ways to do what you want:
        //     - Either you don't care about browser compatibility and you use
        //       nextElementSibling to show the next element
        //     - Or you care, so to work around this, you can "guess" the next
        //       element's id, since it remains consistent
        // Here are the two ways:

        // First way
        target.nextElementSibling.className = '';

        // Second way
        // Strip off the number of the id (starting at index 3)
        var nextElementId = 'div' + target.id.substr( 3 );
        document.getElementById( nextElementId ).className = '';
    }
};

そしてもちろん、CSS:

.hidden {
    display: none;
}

JavaScript コードのコメントを読むことを強くお勧めします。

注意深く読むと、最新のブラウザーでは、JS コードは 5 行程度であることがわかります。もういや。レガシー ブラウザをサポートするには、7 行必要です。

于 2012-05-21T15:10:49.910 に答える