Question

我有一个脚本，使用Uploadify将图像上传到外部服务器，然后将该数据发送到我所在的页面并将代码插入到照片的页面中。

我正在修改我最初使用脚本做的事情。当某人上传照片时，它会将照片插入图库以供显示。原始上传工作正常，但是，如果上传了多张照片，则会创建多个图库。

我要做的是检测图片是否已上传，然后添加必要的<li>。当我运行代码时，它不会检测到类，因此会插入另一个库。我认为我的代码错了。以下是我正在使用的代码：

pm.bind("message5", function(data) {
    var ext = data.split('.').pop().toLowerCase();
    myFrame = $('#editorf').contents().find('body');
    nestedFrame = myFrame.find('#re_contentIframe').contents().find('body');    

    if (ext=='jpg' || ext=='jpeg' || ext=='bmp' || ext=='gif' || ext=='png' || ext=='tiff' || ext=='tif'){  

        //Check if the gallery is in place just insert the <li> element.
        if (nestedFrame.hasClass('glasscase')) {
            $('.glasscase').append($.parseHTML('<li><img src="http://forum.mmjkarma.com/uploads/' + data + '" /></li>'));   
            console.log('hasGlass');
        } 
        //If gallery is not inserted, insert gallery.
        else {
            nestedFrame.append($.parseHTML(' <br><br> <ul class="glasscase gc-start" ><li><img src="http://forum.mmjkarma.com/uploads/' + data + '" /></li></ul>'));
        }
    }
     //If file is not an image, handle it as a PDF OR a Link to File.
     else if (ext=='pdf') {
        nestedFrame.append($.parseHTML('  <br><br> <a target="_blank" href="http://forum.mmjkarma.com/uploads/' + data + '">View Uploaded PDF</a>'));
    } else {
        nestedFrame.append($.parseHTML('  <br><br> <a href="http://forum.mmjkarma.com/uploads/' + data + '">Download Uploaded File</a>'));
    }
    }); 
    }
});

如何修复代码以检测图像是否已上传，从而创建图库（glasscase），以便在上传第二张图片时将其添加到图库，而不是创建第二个图库？

Answer 1

您正在.hasClass('glasscase')上<body>进行测试，而不是<ul>实际开启的//Check if the gallery is in place just insert the <li> element. if (nestedFrame.find("ul.glasscase").length > 0) { ... }。尝试

{{1}}

Answer 2

您似乎正在使用<ul>作为图库，因此您可以执行类似（ vanilla ）

的操作

if (document.querySelector('ul.glasscase')) // exists
else // doesn't exist

如果这个图库永远不会被提供并且只能生成，那么您可以随时在更高的范围内设置标记

var glasscase_exists = false;
// then when created
glasscase_exists = true;

如果您想要引用此节点，您可以假设它会在那里并$('ul.glasscase')然后检查.length以查看它是否存在你需要添加它

除此之外：您在一个if中使用了长逻辑OR 测试，您可以使用indexOf来简化此问题，即

if (-1 !== ['jpg', 'jpeg', 'bmp', 'gif', 'png', 'tiff', 'tif'].indexOf(ext))

简化它的其他选项包括使用对象甚至switch..case

检测元素是否插入并基于元素运行函数

2 个答案: