Question

我在jquery中使用attr将不同的照片添加到叠加层中，具体取决于单击哪个图像效果很好。但如果没有插入图像，我想删除containerImage img。这是我最接近点击并删除空标签，但我希望它在页面加载时发生。

$(document).ready(function(){
    var $container = $("#containerImage img");

    $container.click(function(){
        if ($container.attr("src")==="") {
            $(this).remove();
        } else {
            console.log("not empty");
        }
    });
});

这是html，在img标签中我调用图像进入空src

  <img src="" class="boxed galleryThumbnail"></img>
  <img src="" class="boxed galleryThumbnail"></img>
  <img src="" class="boxed galleryThumbnail"></img>

  <img src="images/image1.jpg" class="boxImage w2" project="Project Title"   
 description="description"   images="images/4.jpg, images/5.jpg"></img>

所以在上面的例子中只有2张图片，留下了第3个空盒子，我希望在图片填满后删除那个盒子。

以下是填写图像的代码，以及标题和说明

$(document).ready(function(){
    $('.boxImage').click(function () {
        var project = $(this).attr('project'),
        description = $(this).attr('description'),
        images = $(this).attr('images');

        $(".projectsTitle").text(project);
        $(".projectsDescription").text(description);


        var imageArray = images.split(',');
        dataloaded(imageArray);
    });

    function dataloaded(array) {
        // clear existing images
        var $thumbnails = $('.galleryThumbnail');
        $thumbnails.attr('src', '');

        for (var i = 0; i < 5; i++) {
          $('.galleryThumbnail:eq(' + i + ')').attr('src', array[i]);
        }
    }
});

Answer 1

我想你想这样做：

$(document).ready(function () {
    $('#containerImage img').each(function (index, element) {
        if ($(this).attr("src") === "") {
            $(this).remove();
        } else {
            console.log("not empty");
        }
    });
});

Answer 2

我假设你的问题令人困惑，所以我用我认为你的意思编辑了它。以下是我的建议：

$(document).ready(function(){
    var $container = $("#containerImage img");

    $container.click(function(){
        if (!$(this).attr("src")) {
            $(this).remove();
        } else {
            console.log("not empty");
        }
    });

    $container.click();
});

http://jsfiddle.net/ZmKvq/

淡出演示以显示它正常工作：

http://jsfiddle.net/ZmKvq/1/

换句话说，只需调用事件处理程序。

这是另一种方法，如果您对整体调用点击处理程序过敏：

$container
    .filter(function(){return !this.getAttribute('src')})
    .fadeOut(
        1000,
        function(){$(this).remove();}
    );

http://jsfiddle.net/ZmKvq/3/

Answer 3

以下假设只有一个图像

有几种方法是在附加事件处理程序后触发click事件：

$container.click(function(){
    if ($container.attr("src")==="") {
        $(this).remove();
    } else {
        console.log("not empty");
    }
}).click();/* triiger a click event*/

或者将处理程序包装成一个可以用于单击处理或由iteself

调用的函数

function checkImage(){
     if ($container.attr("src")==="") {
            $container.remove();
        } else {
            console.log("not empty");
        }
}

/* use as handler */
$('#containerImage img').click(checkImage);

/* call function when page loads*/
checkImage();

Answer 4

$thumbnails.filter("[src='']").remove();

首先，请注意：

</img>是<img>的无效结束标记（IMG是自动关闭标记）
image，description和project是无效的HTML属性。（使用data-*属性）

<img src="" class="boxed galleryThumbnail">
<img src="" class="boxed galleryThumbnail">
<img src="" class="boxed galleryThumbnail">

<img src="images/image1.jpg" class="boxImage w2" data-project="Project Title" data-description="description" data-images="images/4.jpg,images/5.jpg">

$(function(){ // DOM ready shorthand

    $('.boxImage').click(function () {
        var data = $(this).data();
        $(".projectsTitle").text(data.project);
        $(".projectsDescription").text(data.description);
        dataloaded( data.images.split(',') );
    });

    function dataloaded(array) {
        var $thumbnails = $('.galleryThumbnail');
        $thumbnails.attr('src', '');
        for (var i=0; i<$thumbnails.length; i++) {
          $('.galleryThumbnail:eq(' + i + ')').attr('src', array[i]);
        }
        $thumbnails.filter("[src='']").remove();
    }

});

<强> jsBin demo

现在这样做了，我不明白的是......如果您删除的图片在dom ready 上没有任何src属性，那么您的脚本就会落到填写任何图像原因......好吧，它已被删除。

如何在页面加载时删除带有空attr的元素

4 个答案: