1

我需要帮助来简化我的 AJAX 代码。我是一个新手，我确信我的方法是错误的，错误的，错误的。但我不确定如何纠正我的错误并正确地做到这一点。

关键点：

  • 我有一个拇指画廊。
  • 我正在使用 jQuery、Masonry 和 Infinite Scroll 来显示它们，有点像 Pinterest。
  • 每个缩略图下都有一个链接，用于隐藏缩略图/将其从图库中删除。
  • 我已经设法使隐藏功能与下面的代码一起工作。
  • 但是我的业余 hack 要求每个拇指都有自己的脚本片段，如图所示。

问题：有没有办法加强这一点，以便一个代码片段可以应用于页面上的所有拇指？

<div id="gallery-wrapper">

    <div class="thumb" id="thumb_75">
        <img src="/thumbs/thumb_75.jpg" alt="Thumb 75"> 
        <a href="/url/to/hide_thumb.php" id="hide_75">Delete</a>
    </div>
        <script>
            $('#hide_75').click(function(e){e.preventDefault();
            $.post($(this).attr("href"));
            $('#thumb_75').hide(500);
            });                    
        </script>

</div>

另外：我注意到，当将新的拇指添加/附加到第一批拇指（使用无限滚动）时，上述隐藏功能不适用于附加的拇指 - 只有在开始时加载的原始拇指。

我相当肯定我需要“告诉”jQuery 这些新的拇指已被添加，但由于上面的代码是如此 foobar'd 我不知道如何/从哪里开始。

我的无限滚动代码包含在页面的最底部，它看起来像这样：

//Infinite scroll
$wall.infinitescroll({
    navSelector  : 'div.pagination', 
    nextSelector : 'div.pagination a.more',
    itemSelector : '.thumb',
    loading: {
        msgText: "Loading more thumbs...",
        finishedMsg: "That's all folks.",
        img: "/graphics/loading.gif"
    },
    animate      : true, 
    extraScrollPx: 150,
    debug: true,
            errorCallback: function() {
            $('#infscr-loading').animate({opacity: 0},2500);
            }
            },

            function( newElements ) {
            var $newElems = $( newElements ).css({ opacity: 0 });
            $newElems.imagesLoaded(function(){
            ///// PRETTY SURE I NEED TO DO SOMETHING HERE TO INFORM jQUERY OF THE NEW ITEMS
            $newElems.animate({ opacity: 1 });
            $wall.masonry( 'appended', $newElems, true );
            }
            });
    });

谢谢你。

4

1 回答 1

2

尝试以下操作：

// add a listener on the gallery-wrapper. All clicks on links inside the 
// wrapper will be caught here. This way, new thumbs which are added later
// are also covered, because you aren't listining on every child but on 
// one static container.
$('#gallery-wrapper').on('click', 'a', function (e) {
    // prevent default action
    e.preventDefault();

    // get the current scope, this is the 'a'-element
    var $this = $(this);

    // post to the url
    $.post($this.attr('href'));

    // find container of current thumbnail and hide
    $this.closest('.thumb').hide(500);
});
于 2013-05-08T08:23:12.073 回答