Question

滚动到页面底部时，我有一个在多个li元素上调用的函数。该函数删除一个类，并根据每个li的数据属性创建一个图像元素：

function createImg(param) {
    var img = $('<img>');
    img.attr('src', $(this).attr("data-src"));
    img.appendTo(this);
}

$(window).scroll(function () {
    if ($(window).scrollTop() + $(window).height() === $(document).height()) {
    $("li.hidden").slice(0, 2).removeClass('hidden').each(createImg);
});

<ul>
                <li class="hidden" data-src="img/1.jpg">
                    <p>1</p>
                </li>

                <li class="hidden" data-src="img/2.jpg">
                    <p>2</p>
                </li>

                <li class="hidden" data-src="img/3.jpg">
                    <div class="image-cont"></div>
                    <p>3</p>
                </li>
</ul>

但是现在我想在li中的div.image-cont中创建图像。香港专业教育学院尝试过下面的javascript，但它在每个div.image-cont中创建了多个图像，而不是每个只有1个：

function createImg(param) {
        var img = $('<img>');
        img.attr('src', $(this).attr("data-src"));
        img.appendTo(".image-cont", this);
    }

<ul>

                    <li class="hidden" data-src="img/1.jpg">
                       <div class="image-cont"></div>
                        <p>1</p>
                    </li>

                    <li class="hidden" data-src="img/2.jpg">
                       <div class="image-cont"></div>
                        <p>2</p>
                    </li>

                    <li class="hidden" data-src="img/3.jpg">
                        <div class="image-cont"></div>
                        <p>3</p>
                    </li>
    </ul>

Answer 1

function createImg(param) {
    var img = $('<img>');
    img.attr('src', $(this).attr("data-src"));
    //img.appendTo(".image-cont", this);
    $(".image-cont", this).append(img);
}

使用append而不是appendTo解决了这个问题。

在多个元素上运行的函数插入多个图像

1 个答案: