Question

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

USER的输入（标签）：阿尔巴尼亚

显示（按钮）：点击

输出：限制为一张

的图片

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

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

现在，看起来显示将始终为false，因此图像将始终附加到容器。

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

现在，您在尝试输出图像时需要查找一些内容。因此，您可以使用if(!display)

而不是使用if ($('#someImage').length == 0)来确定是否仍需要附加图片

Answer 2

这是因为每次用户点击按钮时，都会调用click事件处理程序。在您的事件处理程序中，您声明了一个新变量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。

JQuery：限制appendChild

2 个答案: