javascript - JQuery:限制appendChild

Question

我试图在调用某个图像时限制 appendChild，流程是这样的

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

显示(按钮):点击

输出:仅限于一张图片

在我的 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

现在，看起来好像 display 总是错误的，所以图像总是附加到容器。

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

现在您在尝试输出图像时需要寻找一些东西。因此，您可以使用 if ($('#someImage').length == 0)< 而不是使用 if(!display) 来确定是否仍需要附加图像