web-dev-qa-db-ja.com

jQueryを使用してクリック時に親divを非表示にする

そのため、ユーザーがdiv内にクラス.closeを持つリンクまたはボタンをスローできるようにする非常に単純なスクリプトを作成しようとしています。その.closeリンクをクリックすると、自動的に閉じます。親コンテナ。

これが私が現在作業しようとしているものです：JSFiddle

私が現在使用しようとしているコードは次のとおりです。

[〜＃〜] html [〜＃〜]

<div class="well notice bg-green">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
    <p>This is a notice that is green.</p>
</div>

[〜＃〜] css [〜＃〜]

.well {
    background: #f9f9f9;
    border-color: #f1f1f1;
    border-style: solid;
    border-width: 1px;
    padding: 15px 20px;
}
.notice {
    margin: 15px 0;
    padding: 0px 15px;
}
.well.bg-green {
    background: #dff0d8;
    border-color: #d6e9c6;
    color: #468847;
}
.close {
    color: #000;
    filter: alpha(opacity=20);
    float: right;
    font-size: 21px;
    font-weight: bold;
    line-height: 1;
    margin-top: 15px;
    opacity: .2;
    text-shadow: 0 1px 0 #fff;
}
.close:hover, .close:focus {
    color: #000;
    cursor: pointer;
    filter: alpha(opacity=50);
    opacity: .5;
    text-decoration: none;
}
button.close {
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
}

JavaScript（jQuery）

$('.close').live("click", function () {
    $(this).parents('div').fadeOut;
});

私の質問が意味をなさない場合、またはさらに詳細が必要な場合はお知らせください。ありがとうございました！

javascriptjqueryhtmlshow-hide
7
Keenan Payne

2つの問題：

  • live()はフィドルのjQueryのバージョンに存在しません（1.7で非推奨、1.9で削除）
  • fadeOutは関数です（実行するための親がありませんでした）

http://jsfiddle.net/KF7S6/

$('.close').on("click", function () {
    $(this).parents('div').fadeOut();
});

動的要素で機能させたい場合は、次のバージョンを使用してください。

$(document).on('click', '.close', function () {
    $(this).parents('div').fadeOut();
});
20
Jason P

http://jsfiddle.net/6Xyn4/4/

_$('.close').click(function () {
    $(this).parent().fadeOut();
});
_

非推奨の.click()の代わりに.live()を使用することをお勧めします

4
Christopher Marshall

作業デモhttp://jsfiddle.net/gL9rw/

問題は.liveこれは現在非推奨です。

熱心な場合： jQueryライブメソッドの何が問題になっていますか？:)

コード

$('.close').on("click", function () {
    $(this).parents('div').fadeOut();
});
3
Tats_innit

これを試してください。fadeOutではなくfadeOut()である必要があります。

$('.close').click(function () {
  $(this).parents('div').fadeOut();
});
1
Krish R

.live（）は無効です。 .on（）デリゲートを使用します。また、あなたは何かを逃しました、以下をチェックしてください

$('body').on("click", '.close', function () {
        $(this).parents().fadeOut();
    });

フィドル

0
Subash Selvaraj