JQuery:限制appendChild

Question

我试图在调用某个映像时限制appendChild，如下所示

用户输入(标签)：阿尔巴尼亚

Display(buttton):点击

输出:仅限于一个的图像

在我的Javascript代码中，它的工作没有任何问题，图像是输出的，它仅限于一个：http://jsfiddle.net/Bh9h7/

JAVASCRIPT代码：

var display = false;

function addimage() {
    selected = document.getElementById("country").value;

    if (selected === "") {
        return false;;
    } else {
        var src = "img2/" + selected + ".jpg";
        var img = document.createElement("img");

        img.src = src;
        if (!display) {
            container.appendChild(img);
            img.style.display = "inline";
            display = true;
            console.log(display);
            console.log(country);
            console.log(selected);
        }
    }
}

但是，当我将它放在Jquery上时，它仍然会输出图像，但它没有限制，这意味着每次用户单击“显示”按钮时，都会输出新的图像。

JQUERY代码：

function mapAddress(result) {
    marker.setPosition(result.geometry.location);
    marker.setMap(map);
    map.fitBounds(result.geometry.viewport);
}

$(document).ready(function () {
    $('#Validate').click(function () {
        $('#address').val($('#address').val().replace(/\s+/g, ' ').trim());

        var address = encodeURI($('#address').val());
        var url = 'https://maps.googleapis.com/maps/api/geocode/json?address=' + address + '&sensor=true';

        $.getJSON(url, function (data) {
            function getCountry(addrComponents) {
                for (var i = 0; i < addrComponents.length; i++) {
                    if (addrComponents[i].types[0] === "street_number") {
                        document.getElementById('street_number').value = addrComponents[i].long_name;
                    }

                    if (addrComponents[i].types[0] === "country") {
                        document.getElementById('country').value = addrComponents[i].long_name;
                    }
                }
                //return false;
            }
            console.log(getCountry(data.results[0].address_components));
        });

        var x = document.getElementById("address").value;
        if (x === "" || x === "Input Address Here") {
            alert("No Input");
        }

        var res = '';
        var address = document.getElementById('address').value;

        geocoder.geocode({
            'address': address
        }, function (results, process) {
            switch (process) {
                case google.maps.GeocoderStatus.OK:
                    $('#valid').val('Address is Valid');
                    $('#res').val(results[0].formatted_address);
                    res = results[0].formatted_address;
                    mapAddress(results[0]);

                    var display = false;
                    selected = document.getElementById("country").value;

                    if (selected === "") {
                        return false;;
                    } else {
                        var src = "img2/" + selected + ".jpg";
                        var img = document.createElement("img");
                        img.src = src;

                        if (!display) {
                            container.appendChild(img);
                            img.style.display = "inline";
                            display = true;
                            console.log(display);
                            console.log(country);
                            console.log(selected);
                        }
                    }

                    var y = document.getElementById("street_number").value;
                    if (y === "") {
                        document.getElementById("valid2").value = "Could not find street number";
                    }

                    var address = $('#address').val();
                    $.ajax({
                        type: 'POST',
                        url: 'Corrections.php',
                        data: {
                            var1: address,
                            var2: res
                        },

                        success: function (data) {
                            console.log('success final');
                            document.getElementById('cor').value = data;
                        }
                    });
                    break;
                case google.maps.GeocoderStatus.ZERO_RESULTS:
                    var x = document.getElementById("address").value;
                    if (x === "" || x === "Input Address Here") {
                        return false;
                    }
                    document.getElementById('valid').value = 'Invalid Address';
                    break;
                default:
                    alert("Error");
            }
        });
    });
});

function clear() {
    document.getElementById('valid').value = '';
    map.setCenter(defaultLatLng);
    map.setZoom(0);
    marker.setMap(null);
}

function clearbtn() {
    document.getElementById("address").value = "Input Address Here";
    document.getElementById("res").value = "Results will be displayed here";
    document.getElementById("valid").value = "";
    document.getElementById("valid2").value = "";
    document.getElementById("cor").value = "Changes will be displayed here";
    document.getElementById("street_number").value = "";
    document.getElementById("route").value = "";
    document.getElementById("locality").value = "";
    document.getElementById("administrative_area_level_1").value = "";
    document.getElementById("country").value = "";
    document.getElementById("postal_code").value = "";

    selected = document.getElementById("country").value;
    display = false;
    document.getElementById("country").value = "";
    selected = null;
    var MyContainer = document.getElementById("container");
    MyContainer.removeChild(MyContainer.childNodes[0]);

    map.setCenter(defaultLatLng);
    map.setZoom(0);
    marker.setMap(null);
}

似乎找不到问题，任何帮助都是值得感激的。

Answer 1

现在，看起来显示总是假的，所以图像总是被附加到容器中。

我的建议是给img一个身份。在img.src = src;下，添加另一行img.id = 'someImage'。

现在，在尝试输出图像时，您需要查找一些内容。因此，与其使用if(!display)来确定是否还需要追加图像，还可以使用if ($('#someImage').length == 0)

Answer 2

这是因为每次用户单击该按钮时，您都会调用您单击事件处理程序。在事件处理程序中，您声明了一个新变量display = false。将检查此变量，并将其设置为true。但是每一次新的点击，“重置”变量到false (实际上，它会生成一个完整的新变量，因为旧的变量超出了范围)，再次检查它并添加一个新的图片。

因此，要么将变量放置在click事件处理程序之外，要么删除它，更好地检查要附加的图像是否已经存在。

var src = "img2/" + selected + ".jpg";
if($('img#yourId').length == 0) {
  $('<img/>', {
    id: "yourId",
    src: src })
    .css('display', 'inline')
    .appendTo(container);
}

对于yourId，您可以声明一个属性，就像您可能对每个按钮所做的那样，或者只是读取其他属性。我也会为此做一个例子，但你没有为我们提供任何HTML。