4

Bootstrap と JavaScript を使用しています。私はそれをアコーディオン形式として使用しています。折りたたまれたものをクリックすると、id に基づいてdivアイテムが開き、表示されます。div

問題：

divアイテムが含まれていない場合は、開いてユーザーにメッセージを表示します。

"no items here"

どうすればそれを行うことができますか？JavaScript で ?

これは私が持っているものです:

意見

<div class="accordion-body collapse state-loading" data-group-id="13" data-bind="attr: { 'id': 'GroupMember_' + Id(), 'data-type-id': ModelId() }" id="GroupMember_15" data-type-id="15">
      <div class="accordion-inner no_border" data-bind="foreach: Children"></div><!--END: accordion-inner--></div>
</div>

開いて、このテキストを表示したいChildren場合:0No items here

Javascript:

OnSuccess: function (data) {
                var _groups = linq.From(options.groupData);    
                var _groupsToUpdate = _groups .Where(function (x) { return x.Id == options.groupId; });
                if (_groupsToUpdate.Any()) {
                    _groupsToUpdate.First().Children = data.Items;                  
                }

共有するものが他にないかどうかわかりません-お知らせください。

アップデート

分割レイアウト:

<div class='accordion-group'>
     <div class='accordion-heading'> Group 1 </div>
     <div class='accordion-body'>
          <div class='accordion-inner'> 
              <div class='element'>No items here</div> 
          </div>
     </div>
</div>

accordion-inner「accordion-body」を表示してアイテムに入るには、「accordion-heading」クラスをクリックする必要があります

4

2 に答える 2

2

showBootstrap v2.3.2を使用していると仮定しているクラスから、アコーディオン要素のイベントにバインドし、そこでチェックを実行する必要があります。

$('.accordion .collapse').on('show', function () {
    var $inner = $(this).find('.accordion-inner');
    if($inner.is(':empty')){
        $inner.html('No items here');
    }   
});

デモフィドル

:emptyセレクターは非常にうるさいので、 の開始タグと終了タグの間に空白があると機能しません.accordion-inner。

また、要素が空であるかどうかを確認するために使用することもif(!$.trim($inner.html()))、@JL が提案したように、子要素の長さを確認することもできます。テキスト ノードは子のように扱われないため、テキストのみの div は空と見なされることに注意してください。

于 2013-08-19T05:35:35.133 に答える
1

jQueryがインストールされていますか？<div>次のような子があるかどうかを確認できます。

if ($('#divId').children().length == 0) {
     $('#divId').append("no items here");
}

jQuery がない場合:

if (!document.getElementById('divId').hasChildNodes()) {
    document.getElementById('divId').innerHTML = "no items here";
}

あなたの編集に基づいて、私たちはaccordian-inner子供を検査していると思います。その場合は、ID を指定してコードに代入します。注: 「アイテムなし」メッセージを含めるのに は必要ありません<div>...メッセージは JavaScript で出力されます (さらに、<div>そこに がある場合は、実際には子を追加したことになり、メッセージは適用されなくなります）。HTML を次のように変更します。

<div class='accordion-group'>
     <div class='accordion-heading'> Group 1 </div>
     <div class='accordion-body'>
          <div id='innerId' class='accordion-inner'> 
              <!-- Remove the 'element' div -->
          </div>
     </div>
</div>

それで：

if (!document.getElementById('innerId').hasChildNodes()) {
    document.getElementById('innerId').innerHTML = "no items here";
}
于 2013-08-19T03:02:55.700 に答える