0

我正在制作一个包含电影细节的无限滚动表，在电影故事情节中，我有一个简单的更多/更少的 javascript 函数（当你点击更多时，它会显示所有文本，当你点击更少时，它会隐藏它）以便制作桌子看起来不错。问题是，在前 10 部电影之后，当无限滚动启动时，更多/更少功能对其余电影不起作用，它会显示整个故事情节。

无尽的滚动脚本：

$(document).ready(function () {
    $(window).scroll(function () {
        if ($(window).scrollTop() == $(document).height() - $(window).height()) {
            $('div#loadingModal').show();
            $.ajax({
                url: "movies.php?lastMovie=" + $(".postedMovies:last").attr('id'),
                success: function (html) {
                    $('div#loadingModal').hide();
                    if (html) {
                        $("#postedMovies").append(html);
                    }
                }
            });
        }
    });
});

或多或少的方法：

$(document).ready(function () {
var showChar = 100;
var ellipsestext = "...";
var moretext = "more";
var lesstext = "less";
$('.more').each(function () {
    var content = $(this).html();

    if (content.length > showChar) {

        var c = content.substr(0, showChar);
        var h = content.substr(showChar - 1, content.length - showChar);

        var html = c + '<span class="moreellipses">' + ellipsestext + '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';

        $(this).html(html);
    }

});

$(".morelink").click(function () {
    if ($(this).hasClass("less")) {
        $(this).removeClass("less");
        $(this).html(moretext);
    } else {
        $(this).addClass("less");
        $(this).html(lesstext);
    }
    $(this).parent().prev().toggle();
    $(this).prev().toggle();
    return false;
});

});

php回声

echo "<tr class='postedMovies' id=\" $fuid \">";

echo'    

            <td>'.$_SESSION['fid'].'</td>
            <td><img width="51px" height="72px"   src="'.$movie_posterlarge.'" /></td>
            <td><a target="_blank" href="'.$movie_url.'">'.$movie_title.'</a></td>
            <td>'.$movie_released.'</td>
            <td>'.$movie_genres.'</td>
            <td>'.$movie_rating_imdb.'</td>
            <td>'.$movie_rating_user.'</td>
            <td width="200 px">'.$movie_viewed.'</td>
            <td style="text-align:left"><div class="comment more">'.$movie_storyline.'</div></td>


        ';

echo "</tr>";

这是输出：

http://i.imgur.com/vzb8ipa.png

4

2 回答 2

0

尝试添加dataType：

$(document).ready(function() { 
    $(window).scroll(function() {
        if($(window).scrollTop() == $(document).height() - $(window).height()) {    
            $('div#loadingModal').show();
            $.ajax({
                url: "movies.php?lastMovie="+ $(".postedMovies:last").attr('id'),
                dataType: 'html',
                success: function(html) {
                    $('div#loadingModal').hide();
                    if(html){       
                        $("#postedMovies").append(html);
                    }
                }
            });
        }
    });
});

或者，根据您返回的确切内容，jQueryify html 数据：

$("#postedMovies").append($(html))
于 2013-09-10T16:09:41.607 回答
0

我认为您必须more在每次 ajax 调用后添加指向新元素的链接。并用于jQuery.on添加点击监听器，它将处理新添加的元素。

希望这会有所帮助-

var showChar = 100;
var ellipsestext = "...";
var moretext = "more";
var lesstext = "less";

function addMoreLink($elements) {
    $elements.each(function() {
        var content = $(this).html();
        if (content.length > showChar) {
            var c = content.substr(0, showChar);
            var h = content.substr(showChar - 1, content.length - showChar);
            var html = c + '<span class="moreellipses">' + ellipsestext + '&nbsp;</span><span class="morecontent"><span>' + h
                    + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';

            $(this).html(html);
        }
    });
}

$(document).ready(function() {
    $(window).scroll(function() {
        if ($(window).scrollTop() == $(document).height() - $(window).height()) {
            $('div#loadingModal').show();
            $.ajax({
                url : "movies.php?lastMovie=" + $(".postedMovies:last").attr('id'),
                success : function(html) {
                    $('div#loadingModal').hide();
                    if (html) {
                        var newElements = $(html);
                        $("#postedMovies").append(newElements);
                        addMoreLink(newElements.find('.more'));
                    }
                }
            });
        }
    });

    addMoreLink($('.more'));

    /* using jquery on, will take care of newly added elements */
    $("table").on("click", ".morelink", function(event) {
        if ($(this).hasClass("less")) {
            $(this).removeClass("less");
            $(this).html(moretext);
        } else {
            $(this).addClass("less");
            $(this).html(lesstext);
        }
        $(this).parent().prev().toggle();
        $(this).prev().toggle();
        return false;
    });
});
于 2013-09-10T16:31:58.610 回答