2017-01-13 3 views
0

내가 워드 프레스에서 아약스를 통해 동위 원소 항목을 추가하고 있습니다를 추가 제거. 이제는 buttontext를 전환하고 클래스를 .showless로 바꾸려면 이전에 추가 한 항목을 모두 제거해야합니다. 그들은 모두 클래스 .newsItem.appendedItem을가집니다. showless 기능도 입력되지 않는 때문에 콘솔에서 로그를하지 않는 한, 는 동위 원소 항목

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

불행하게도이 작동하지 않습니다

나는이 방법을 시도했다. 나는 무엇을 간과하고 있는가?

도움 주셔서 감사합니다. 카라

업데이트 1 : 나는 구글 콘솔에서이 오류를 받고 있어요

. enter image description here

+0

문제가 고유합니까? 이 게시물을 확인 하시겠습니까? http://stackoverflow.com/questions/19485281/how-can-i-remove-all-images-and-add-a-new-list-of-images – mumair

+0

감사합니다. @mumair, 저는 항목을 제거하는 데 도움이 필요하다고 생각하지 마십시오. 그건 내가 어떻게 든 할 수있는 일이다. 나는 이해하지 못한다. 왜 나는 심지어 그 기능에 들어갈 수 없다. 나는 뭔가를 간과해야합니다. – CaraMar

+0

문제를 디버깅하기 위해'jsfiddle' 또는'plunker'를 제공 할 수 있습니까? – mumair

답변

0

확실하지 않은 점은 무엇 이었습니까? 하지만 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; 
    } 

}); 

크롬에서. 하지만 Firefox에서 Ajax 배열이 완전히 비어 있고 데이터를 가져올 수 없다는 것을 알아 냈습니다. 아마도 또 다른 문제는 별도로 게시 할 예정입니다.