Удаление добавляется изотопных элементов

Question

Я добавление элементов изотопные через Ajax в Wordpress:

Мой JS код:

var $news_container = $('#news'); //The ID for the list with all the blog posts 
$news_container.isotope({ //Isotope options, 'item' matches the class in the PHP 
    itemSelector: '.newsItem', 
    masonry: { 
     columnWidth: '.news-item-sizer', 
     gutter: '.gutter-sizer' 
    } 
}); 
var has_run = false; 
var init_offset = 0; 

$('button.showall').click(function(e) { 
    e.preventDefault(); 
    var button = $(this); 

    // Disable button 
    $(button).removeClass('showall'); 
    $(button).addClass('showless'); 

    // Record Nonce 
    var nonce = $(this).data("nonce"); 

    if(has_run == false) { 
     button.data('offset', $(this).data("offset")); 
     init_offset = $(this).data("offset"); 
    } 

    // Set AJAX parameters 
    data = { 
     action: 'mft_load_more_ajax', 
     init_offset: init_offset, 
     offset: button.data('offset'), 
     nonce: nonce 
    }; 

    $.post(mft_load_more_ajax.ajaxurl, data, function(response) { 

     // Set Container Name 
     var response = JSON.parse(response); 
     console.log(response); 

     // Run through JSON 
     $.each(response, function(key, value) { 
      // Set Value 
      var val = $(value); 

      // Set Container 
      var $container = $('#news').isotope(); 

      // Append Val 
      $container.append(val).isotope('appended', val); 

      $(button).html('show less'); 

     }); 

     // Set Offset 
     var offset = button.data("offset"); 
     button.data("offset", offset + 11); 

     // If Has Run 
     has_run = true; 

     return false; 
} 

До сих пор это работает довольно хорошо. Теперь я хотел бы переключить кнопочный текст и его класс на .showless, и при следующем нажатии все ранее добавленные элементы должны быть удалены. У всех есть класс .newsItem.appendedItem.

Я попробовал этот метод:

$('button.showless').click(function(e) { 
    var button = $(this); 
    console.log('showless'); 
    $out = $('.newsItem.appendedItem'); 
    var isotopeInstance = $('#news').data('isotope'); 
    isotopeInstance.$allAtoms = isotopeInstance.$allAtoms.not($out); 
    $out.remove(); 

    // Disable button 
    $(button).removeClass('showless'); 
    $(button).addClass('showall'); 

    has_run = false; 

    return false; 
}); 

К сожалению, это не работает, потому что функция showless даже и не вошли, так как я не получаю журнал в консоли. Что я не замечаю?

Благодарим за помощь! Cara

Update 1:

Я получаю эту ошибку в консоли Google.

Answer 1

Не уверен, в чем была проблема сейчас. Но я немного очистил код с помощью оператора if, чтобы проверить, добавлены ли уже элементы.

Так что мой окончательный код теперь выглядит следующим образом:

var $news_container = $('#news'); //The ID for the list with all the blog posts 
$news_container.isotope({ //Isotope options, 'item' matches the class in the PHP 
    itemSelector: '.newsItem', 
    masonry: { 
     columnWidth: '.news-item-sizer', 
     gutter: '.gutter-sizer' 
    } 
}); 
var is_appended = false; 

$('button.showall').click(function(e) { 
    e.preventDefault(); 
    var button = $(this); 

    // Record Nonce 
    var nonce = $(this).data("nonce"); 

    if(is_appended == false) { 
     button.data('offset', $(this).data("offset")); 

     // Disable button 
     button.prop("disabled" , true); 

     // Set AJAX parameters 
     data = { 
      action: 'mft_load_more_ajax', 
      offset: button.data('offset'), 
      nonce: nonce 
     }; 

     $.post(mft_load_more_ajax.ajaxurl, data, function(response) { 
      // Set Container Name 
      var response = JSON.parse(response); 
      console.log(response); 

      // Run through JSON 
      $.each(response, function(key, value) { 
       // Set Value 
       var val = $(value); 

       // Set Container 
       var $container = $('#news').isotope(); 

       // Append Val 
       $container.append(val).isotope('appended', val); 

      }); 

      // Undo Button Disable 
      button.prop("disabled" , false); 
      button.html('Weniger News anzeigen'); 

      // Set Offset 
      // var offset = button.data("offset"); 
      // button.data("offset", offset + 11); 

      // If Was appended 
      is_appended = true; 

      return false; 

     }); 

    } else if(is_appended == true) { 

     $out = $('.newsItem.appendedItem');    
     $news_container.isotope('remove', $out) 
     // layout remaining item elements 
     .isotope('layout'); 
     button.html('Alle News anzeigen'); 

     is_appended = false; 
     return false; 
    } 

}); 

В Chrome все работает отлично. Но выяснилось, что в Firefox мой массив Ajax полностью пуст, и я не могу получить какие-либо данные. Вероятно, еще одна проблема, я собираюсь опубликовать отдельно.