105

警告メッセージに問題があります。正常に表示され、ユーザーが押すx（閉じる）と閉じることができますが、ユーザーが再度表示しようとすると（たとえば、ボタンイベントをクリック）、表示されません。(さらに、この警告メッセージをコンソールに出力すると、 に等しくなり[]ます。) 私のコードは次のとおりです。

 <div class="alert" style="display: none">
   <a class="close" data-dismiss="alert">×</a>
   <strong>Warning!</strong> Best check yo self, you're not looking too good.
 </div>

そしてイベント：

 $(".alert").show();

PS！何らかのイベントが発生した後 (ボタンのクリックなど) にのみ警告メッセージを表示する必要があります。または、私が間違っていることは何ですか？

4

15 に答える 15

183

data-dismiss は要素を完全に削除します。代わりに jQuery の .hide() メソッドを使用してください。

すぐに解決できる方法:

インライン JavaScript を使用して、次のように onclick 要素を非表示にします。

<div class="alert" style="display: none"> 
    <a class="close" onclick="$('.alert').hide()">×</a>  
    <strong>Warning!</strong> Best check yo self, you're not looking too good.  
</div>

<a href="#" onclick="$('alert').show()">show</a>

http://jsfiddle.net/cQNF​​L/

ただし、これは怠惰な場合にのみ使用する必要があります (保守可能なアプリが必要な場合は、これは良いことではありません)。

正しい方法：

要素を非表示にするための新しいデータ属性を作成します。

Javascript:

$(function(){
    $("[data-hide]").on("click", function(){
        $("." + $(this).attr("data-hide")).hide()
        // -or-, see below
        // $(this).closest("." + $(this).attr("data-hide")).hide()
    })
})

次に、マークアップで data-dismiss を data-hide に変更します。jsfiddle の例。

$("." + $(this).attr("data-hide")).hide()

これにより、data-hide で指定されたクラスのすべての要素が非表示になります。つまりdata-hide="alert"、alert クラスのすべての要素が非表示になります。

Xeon06は代替ソリューションを提供しました。

$(this).closest("." + $(this).attr("data-hide")).hide()

これにより、最も近い親要素のみが非表示になります。これは、各アラートに一意のクラスを与えたくない場合に非常に便利です。ただし、アラート内に閉じるボタンを配置する必要があることに注意してください。

jquery docからの .closest の定義:

セット内の各要素について、要素自体をテストし、DOM ツリー内のその祖先をたどって、セレクターに一致する最初の要素を取得します。

于 2012-11-25T11:22:55.760 に答える
27

モデル変数を使用してダイアログを表示/非表示にし、削除しましたdata-dismiss="alert"

例：

<div data-ng-show="vm.result == 'error'" class="alert alert-danger alert-dismissable">
    <button type="button" class="close" data-ng-click="vm.result = null" aria-hidden="true">&times;</button>
    <strong>Error  !  </strong>{{vm.exception}}
</div>

私にとってはうまくいき、jqueryに出かける必要がなくなります

于 2014-05-19T07:29:16.680 に答える
19

close.bs.alertこの問題への良いアプローチは、Bootstrap のイベント タイプを利用してアラートを削除するのではなく非表示にすることだと思います。Bootstrap がこのイベント タイプを公開する理由は、DOM からアラートを削除するデフォルトの動作を上書きできるようにするためです。

$('.alert').on('close.bs.alert', function (e) {
    e.preventDefault();
    $(this).addClass('hidden');
});
于 2017-03-24T23:54:16.753 に答える
1

Henrik Karlsson が投稿し、Martin Prikryl が編集した回答に同意します。アクセシビリティに基づいて、1 つの提案があります。.attr("aria-hidden", "true") を末尾に追加すると、次のようになります。

$(this).closest("." + $(this).attr("data-hide")).attr("aria-hidden", "true");
于 2015-04-20T13:10:04.667 に答える
1

私もこの問題に遭遇しました。単に閉じるボタンをハッキングするだけの問題は、標準のブートストラップ アラート クローズ イベントにアクセスする必要があることです。

私の解決策は、最小限の手間で適切に形成された Bootstrap 3 アラート (必要に応じて閉じるボタンの有無にかかわらず) を挿入し、ボックスを閉じた後に簡単に再生成できるようにする、小さくてカスタマイズ可能な jquery プラグインを作成することでした。

使用法、テスト、および例については、https://github.com/davesag/jquery-bs3Alertを参照してください。

于 2014-05-06T11:24:45.253 に答える
0

他の回答に基づいて、data-dismiss を data-hide に変更することで、この例ではリンクからアラートを開く処理を行い、アラートを繰り返し開いたり閉じたりできるようにします。

$('a.show_alert').click(function() {
    var $theAlert = $('.my_alert'); /* class on the alert */
    $theAlert.css('display','block');
   // set up the close event when the alert opens
   $theAlert.find('a[data-hide]').click(function() {
     $(this).parent().hide(); /* hide the alert */
   });
});
于 2014-01-06T18:39:45.013 に答える
0

この問題は を使用することによって発生します。アラートstyle="display:none"を Javascriptで非表示にするか、少なくとも表示するときはスタイル属性を削除する必要があります。

于 2012-11-25T11:22:05.173 に答える
0

Henrik Karlssonによる回答に基づく解決策を次に示しますが、適切なイベント トリガー( Bootstrap ソースに基づく)を使用します。

$(function(){
    $('[data-hide]').on('click', function ___alert_hide(e) {
        var $this = $(this)
        var selector = $this.attr('data-target')
        if (!selector) {
            selector = $this.attr('href')
            selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') // strip for ie7
        }

        var $parent = $(selector === '#' ? [] : selector)

        if (!$parent.length) {
            $parent = $this.closest('.alert')
        }

        $parent.trigger(e = $.Event('close.bs.alert'))

        if (e.isDefaultPrevented()) return

        $parent.hide()

        $parent.trigger($.Event('closed.bs.alert'))
    })
});

メモとして、主に私のための答え。

于 2018-09-02T11:34:27.520 に答える