删除附加的同位素项目

Question

我在 Wordpress 中通过 Ajax 添加同位素项目：

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

到目前为止，这工作得很好。现在我想将按钮文本和它的 class 切换为 .showless ，然后在下一次单击时应删除所有以前附加的项目。他们都有 class .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 函数，因为我没有在控制台中获得日志。我忽略了什么？

感谢您的帮助！卡拉

更新 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 数组完全是空的，我无法获取任何数据。可能是另一个问题，我单独去post

删除附加的同位素项目

Removing appended isotope items

ajax

jquery-isotope