javascriptのif文の処理に関して

Question

if文をクラス名で判別して、処理を分けたい

isotopeとInfinite Scrollを使ったページを作成しています。
1回目にリストをクリックした時は、if文の最初の処理を行い、
2回目以降はelseの処理を行いたいと思っています。
判定するclassも、javascriptでクラスを付与しています。
どうしても、1回目をクリックした時に、if文の処理がされません。
2回目以降は、elseの処理は動いています。
色々と試したのですがうまくいきません。
ご教授頂けますとうれしいです。
よろしくお願いいたします。

該当のソースコード

  <script type="text/javascript">

  $('#filters-2').on( 'click', 'li', function() {
      $("#container").addClass("selected");
  });

  var element = document.getElementById('container');
  $('#filters-2').on( 'click', 'li', function() {
    if( element.classList.contains('selected') == false ){
      $(function() {
        $.ajax({
          url: 'pages/2.html',
          cache: false,
          success: function(html){
            $('#filters-2').on( 'click', 'li', function() {
                $(html).find('#container').each(function(){
                    $('#container').prepend(this).isotope( 'reloadItems' ).isotope({ sortBy: 'original-order' });
                  return false;
                });
            });
          }
        });
      });
    }
    else {
      var $container = $('#container').isotope();
      $('#filters-2').on( 'click', 'li', function() {
        var filterValue = $(this).attr('data-filter');
        $container.isotope({ filter: filterValue });
        return false;
      });
    }
    return false;
  });
  </script>

      <ul class="work_cate button-group" id="filters-2">
        <li class="cate_all" data-filter="*">ALL</li>
        <li class="cate_item1" data-filter=".item-1">ITEM1</li>
        <li class="cate_item2" data-filter=".item-2">ITEM2</li>
        <li class="cate_other" data-filter=".item-other">OTHERS</li>
      </ul>
    <div id="container" class="clearfix infinite-scrolling">
      <div class="element cate_item1" data-symbol="H" data-category="other">
        <p class="number">1</p>
      </div>
      <div class="element cate_item2" data-symbol="H" data-category="other">
        <p class="number">2</p>
      </div>
    </div>

Answer 1

$('#filters-2').on( 'click', 'li', function() {
    $("#container").addClass("selected"); // ……A
});

var element = document.getElementById('container');
$('#filters-2').on( 'click', 'li', function() { // ……B
  if( element.classList.contains('selected') == false ){
    // ……C
  }
});

という構造のため、#filters-2がクリックされると、A→Bの順で実行されます。そうすると#containerにはselectedというclassが必ずついていますので、Cが実行されることはありません。
Aの処理をCの最後で行えば、想定した動作になるのではないでしょうか。

Comments

[hamotaga54]

ご回答ありがとうございます！
isotopeが原因かもしれないですが、
順番を変えても想定どおりになりませんでした。

Answer 2

isotopeについてはよくわかりませんが

$('#filters-2').on( 'click', 'li', function() {

  $("#container").addClass("selected");

});

で、#filters-2をクリックするたびにつねにselectedを付加しているので
ifで判断している

if( element.classList.contains('selected') == false ){

すなわち

if( !$('#container').hasClass('selected')){

は、常に偽になりますのでelseに流れるでしょうね

流れ的には以下のようにするとよいのではないでしょうか？

$(function(){
  $('#filters-2 li').on('click',function(){
    if( !$('#container').hasClass('selected')){
      console.log(1);
      $("#container").addClass("selected");
    }else{
      console.log(2);
    }
  });
});

Comments

[hamotaga54]

このソースで試してみたらうまくいきました。
ありがとうございます。
すごく、数時間悩んでいたので助かりました！