0

質問：

要素内にDOMがない.click()場合、イベントを発生させようとしています。<ul></ul>

このコードの背後にある思考プロセスは、ユーザーがxアイテムをクリックすると左にスライドし、次に.remove()DOMからのものです。美しく空白にされたHTMLの結果として、静止画内に改行と間隔が残されてulいます。そのため、if()ステートメントを正しく機能させることができません。

使用して比較しても、イベント$.trim()は発生しません。.click()

HTMLの画像

ここに画像の説明を入力してください

HTML

    <div class="btn-group pull-right nav-notice">
      <span class="badge badge-info nav-notice-button">8</span>
      <div class="notice-container">
        <span class="notice-arrow"></span>
        <ul class="notice-container-list">
          <li><span class="label label-warning">Warning</span><span class="notice-message">Warning 12315125</span><i class="notice-remove icon-remove-circle"></i></li>
          <li><span class="label label-success">success</span><span class="notice-message">Warning 12315125</span><i class="notice-remove icon-remove-circle"></i></li>
          <li><span class="label label-important">important</span><span class="notice-message">Warning 12315125</span><i class="notice-remove icon-remove-circle"></i></li>
        </ul>
      </div>
    </div>

jQuery

//live(), looking for past/present DOM
$('.notice-remove').live( "click", function(){
    //no double dipping!
    $this = $(this);
    //Hide the x item, improves the animation a bit
    $this.hide();
    //animate the width of the li, to give it a slideoff effect
    //when the animate completes, remove the element from the DOM
    $this.parent('li').animate({
        width: "0"
    }, 'fast', '',
    function(){
        $(this).remove();
    });
    //get the html contents of the ul element
    var str = $('.notice-container-list').html();
    //trim the contents of the ul, and if they are exactly empty
    //fire the click event to close the container
    if( $.trim(str) === "" ){
        log('Closing the Notice');
        $('.nav-notice-button').click();
    }
});
4

2 に答える 2

1

私はそれがこのように機能するとは思えません。ほら、あなたはそれのためにいくつかのアニメーション機能を宣言した直後に要素をチェックしています。しかし、その関数はすぐには呼び出されません-それがanimate（）の要点です！そして、これは、内容を確認するときに、<ul>まだ空ではないことを意味します。

代わりに、次の手法を使用してください。<ul> 削除するときに <li>残っている要素の数を確認します。<ul>それらがない場合は、それ自体を削除します。

$this.parent('li').animate({
        width: "0"
    }, 'fast', '',
    function(){
        var $li = $(this);
        if (! $li.siblings().length) {
           $li.parent().remove();
        }
        else {
           $li.remove();
        }
    });

これが動作するjsFiddleです（テキストを入力<i></i>する必要があり、cssのアイコンを使用できません）。同じ理由で、そのクリックで何をすべきかわからないので、.parent().remove()をトリガーする代わりに単純なものを使用しました。$('.nav-notice-button').click()）。

于 2012-06-22T07:18:44.383 に答える
0

.notice-container-list子がゼロかどうかをチェックするのではなく、単にチェックする方がよい.html()でしょう。

于 2012-06-22T07:17:35.270 に答える