0

jQueryのクリックイベントを使用するときにボタンに2つの機能を割り当てたい場合、次のように機能します：アニメーション化するjQueryでdivをスライドアップするボタンをクリックすると、別のdivの後ろに隠れるdivがあります...この#show ID は div を示し、ID #hide は div を非表示にします。同じボタンに 2 つの異なる ID を割り当てるにはどうすればよいですか? ID属性とattrを使用してこれを行いました... #hideに変更されましたが、このIDにリンクされた機能は実行されません

http://jsfiddle.net/dca2b/1/

HTML:

<div class="content"></div>
<div class="footer"></div>
<div class="hiddendiv"> 
    <a href="#" id="show">show</a>
</div>

CSS:

.content {
    height: 400px;
}
.footer {
    display: inline-table;
    background: #ff8;
    width: 100%;
    height: 80px;
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
}
.hiddendiv {
    width: 500px;
    height: 300px;
    background: #252525;
    position: relative;
    z-index: 1;
    top: -120px;
    margin: 0 auto;
}
.hiddendiv a {
    color: #000;
    font-size: 15px;
    font-family: sans-serif;
    text-decoration: none;
    padding-top:5px;
    padding-bottom:5px;
    padding-left: 20px;
    padding-right: 20px;
    background: #eee;
    border-radius: 10px;
    box-shadow: inset 0px 1px 20px 0px #333;
}
.hiddendiv a:hover {
    color: #f0f;
}

Jクエリ:

$("#show").click(function () {
    $(".hiddendiv").animate({
        top: "-=250"
    }, "slow");
    $("#show").attr("id", "hide");
});

$("#hide").click(function () {
    $(".hiddendiv").animate({
        top: "+=250"
    }, "slow");
    $("#hide").attr("id", "show");
});
4

1 に答える 1

0

したがって、私の答えにはいくつかの部分がありますが、ご容赦ください。

(1) 現在機能していない理由は、実行時にid$("#hide").click(function() { ...を持つ要素がページにまだないhideため、関数がどこでも実行するように設定されていないためです。これを回避するために使用できる 1 つの方法は、次の手順を実行することです。

$(".hiddendiv").on('click', '#hide', function() {
   ...
});

代わりにクリック イベント ハンドラーを親 div にアタッチすることで、イベントが の id を持つ子 div で発生したことを親が確認すると、hideその子 div で関数が実行されます。

(2) ここでは ID を使用しないでください。ある時点で、この機能を必要とするボタンがページに複数ある場合、ID はページごとに 1 回だけ使用する必要があるため、問題が発生します。このシナリオでは、クラスの方がはるかにうまく機能します。次に、次のようなことができます。

$(".hiddendiv").on('click','.show', function () {
    $(".hiddendiv").animate({
        top: "-=250"
    }, "slow");
    $(".show").addClass('hide').removeClass('show');
});

(3) やっと動く！しかし、ページに別の hiddendiv を追加すると、1 つをクリックすると、それらすべてが更新されることがわかります。を使用して修正できますthis。関数がトリガーされると、thisキーワードはクリックした要素を参照します (showまたはhideクラスのいずれかを使用します。これを利用して、次のことを行うことができます。

$(".hiddendiv").on('click','.show', function () {
    $(this).parent().animate({
        top: "-=250"
    }, "slow");
    $(this).addClass('hide').removeClass('show');
});

$(".hiddendiv").on('click','.hide', function () {
    $(this).parent().animate({
        top: "+=250"
    }, "slow");
    $(this).addClass('show').removeClass('hide');
});
于 2013-11-02T20:20:57.567 に答える