0

ページの別の場所で 4 つの異なる div を表示/非表示にするために 4 つのリスト項目を使用する Web サイトのコードを書いています。

これが私がやっていることの大まかな例です:

<ul>
    <li id="first">One</li>
    <li id="second">Two</li>
    <li id="third">Three</li>
    <li id="fourth">Four</li>
</ul>

<div id="one">This is the first div</div>
<div id="two">This is the second div</div>
<div id="three">This is the third div</div>
<div id="four">This is the four div</div>

そして、私はいくつかの醜いお尻の JS コードを実行しています。私の人生では、それを単純化する方法を思い出したり、理解したりすることはできません。

$("#first").click(function() {
    $("#one").fadeIn();
    $("#two, #three, #four").fadeOut();
});
$("#second").click(function() {
    $("#two").fadeIn();
    $("#one, #three, #four").fadeOut();
});
$("#third").click(function() {
    $("#three").fadeIn();
    $("#two, #one, #four").fadeOut();
});
$("#fourth").click(function() {
    $("#four").fadeIn();
    $("#two, #three, #one").fadeOut();
});​

これは私が必要とすることを行いますが、もっと簡単な方法が必要であることはわかっています. これが動作する JSFiddle です - http://jsfiddle.net/claycauley/FBrx5/

誰かがそれを単純化する理由/方法を理解するのを手伝ってくれるなら、それはまた素晴らしいことです.

4

3 に答える 3

2

試す：

$("li").click(function() {
    $("div:visible").fadeOut();
    $("div").eq($(this).index()).fadeIn();
});​

http://jsfiddle.net/FBrx5/1/

于 2012-08-11T03:07:48.487 に答える
1

@Petahの助けを借りて、私はこれを思いついた：

$("li").click(function() {
    if ($("div").eq($(this).index()).is(":visible")) {
        return false;
    }
    else {
        $("div:visible").fadeOut();
        $("div").eq($(this).index()).fadeIn();
    }
        return false;
});​

彼の解決策の唯一の問題は、それがすでに表示されていても、divでアクティブ化されていることでした。それはフェードアウトしてから再びインします。これで私はそれが起こらないようにすることができます。

于 2012-08-11T03:32:37.640 に答える
0

次のようなものはどうですか：

<ul id="linky">
    <li id="first">One</li>
    <li id="second">Two</li>
    <li id="third">Three</li>
    <li id="fourth">Four</li>
</ul>

<div class="first">This is the first div</div>
<div class="second">This is the second div</div>
<div class="third">This is the third div</div>
<div class="fourth">This is the four div</div>

$("#linky").on("click", "li", function(e) {
    $("div:visible").fadeOut();
    $("." + e.target.id).fadeIn();
});

http://jsfiddle.net/FBrx5/4/

于 2012-08-11T03:11:10.077 に答える