Artikel Isotop beigefügten Entfernen von

Question

Ich Isotop Artikel über Ajax in Wordpress anhängt:

Mein JS-Code:

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; 
} 

Bisher funktioniert das ganz gut. Jetzt möchte ich den Buttontext und seine Klasse auf .showless umstellen und beim nächsten Klick sollten alle zuvor angehängten Elemente entfernt werden. Sie alle haben die Klasse .newsItem.appendedItem.

habe ich versucht, diese Methode:

$('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; 
}); 

Leider funktioniert das nicht, weil die showless Funktion nicht einmal eingegeben wird, wie ich in der Konsole nicht ein Protokoll erhalten. Was übersehe ich?

Danke für Ihre Hilfe! Cara

Update 1:

ich diesen Fehler in Google Console bin immer.

Answer 1

Nicht sicher, was war das Problem jetzt. Aber ich habe den Code mit einer if-Anweisung etwas bereinigt, um zu überprüfen, ob die Elemente bereits angehängt wurden.

Also meine letzte Code sieht nun wie folgt aus:

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; 
    } 

}); 

In Chrome alles perfekt funktioniert. Aber gerade herausgefunden, dass in Firefox mein Ajax-Array komplett leer ist und ich keine Daten abrufen kann. Wahrscheinlich ein anderes Problem, ich werde separat veröffentlichen.