はそれぞれのクラスを探している少数のULリストを反復します。見つからない場合はエラーをスローして続行

Question

タイトルが混乱している場合は、ごめんなさい。少数の単語で問題を説明する方法を考えるのは難しいです。

私はゲームの「レベル」、「カテゴリ」、「時間」を含む3つの異なるリストを持っています。もともと、リストのアイテムにはクラスがありません。各リストから項目を選択すると、 'activeSelection'クラスが取得されます。

各リストにそのクラスを持つアイテムがあるかどうかを確認する必要があります。そうでない場合は、現時点では表示されていないリストの下に警告を表示します（リストごとに警告が表示されます）。また、 "startGame（）"関数を実行させないでください。

2つのリストにそのクラスが見つからない場合は、両方のリストの下に警告が表示されます。 3つのリストすべてにクラスがない場合も同じです。

const levelList = document.querySelector('.levelList'); 
 
const categoryList = document.querySelector('.categoryList'); 
 
const timeList = document.querySelector('.timeList'); 
 

 
$(document).ready(function() { 
 

 
    $(playButton).on('click', function() { 
 
    if ($(levelList).children("li").hasClass('activeSelection') == false) { 
 
     $(levelList).find('.warning').show(); 
 
    } else { 
 
     startGame(); 
 
    } /** that's how I check one of the lists. I need to check all 3 
 
     and if at least one does not have a class give a warning, but not 
 
     stop checking until all 3 lists are checked to give the rest of 
 
     the warnings if needed **/ 
 
    }); 
 

 
});

.warning { 
 
display: none; 
 
}

<div class="list"> 
 
     <div class="levelList"> 
 
     <h2>level</h2> 
 
     <ul> 
 
      <li>easy</li> 
 
      <li>medium</li> 
 
      <li>hard</li> 
 
     </ul> 
 
     <p class="warning">! please select level !</p> 
 
     </div> 
 
     <div class="categoryList"> 
 
     <h2> category</h2> 
 
     <ul> 
 
      <li>movies</li> 
 
      <li>songs</li> 
 
      <li>people</li> 
 
      <li>animals</li> 
 
      <li>random things</li> 
 
     </ul> 
 
     <p class="warning">! please select Category !</p> 
 
     </div> 
 
     <div class="timeList"> 
 
     <h2>time</h2> 
 
     <ul> 
 
      <li>1 min</li> 
 
      <li>2 min</li> 
 
      <li>3 min</li> 
 
     </ul> 
 
     <p class="warning">! please select time !</p> 
 
     </div> 
 
    </div>

Answer 1

あなたは別に、すべての3つのチェックをして試すことができます：

$(document).ready(function() { 
    $(playButton).on('click', function() { 
    var status = 0; 
    if ($(levelList).children("li").hasClass('activeSelection') == false) { 
     $(levelList).find('.warning').show(); 
    } else { 
     status += 1; 
    } 
    if ($(categoryList).children("li").hasClass('activeSelection') == false) { 
     $(categoryList).find('.warning').show(); 
    } else { 
     status += 1; 
    } 
    if ($(timeList).children("li").hasClass('activeSelection') == false) { 
     $(timeList).find('.warning').show(); 
    } else { 
     status += 1; 
    } 
     if (status === 3) 
     startGame(); 
    });