Question

所以我有一个包含4张图片的XML，我的JS假设在XML中提取图像并在点击按钮后显示它们。但是当我运行程序时，按钮会显示，并且可以点击。但是当我点击按钮时，即使我在点击功能中调用它，它也不会显示，也不会显示它内部的图片。有谁知道为什么？

var xml;
var raceName;
var raceSrc;
$(document).ready(function () {
    var xmlDoc = $.ajax({
        type: "GET",
        url: "Lab8XML.xml",
        dataType: "xml",
        data: null
    });
    $(document.getElementById("button")).click(function(){
        xml = $(xmlDoc.responseXML);
        getRandomRace();
        $("<img src='" + raceSrc + "' alt='" + raceName + "' />").appendTo("#raceArea");
        $("#raceArea > h2").text(raceName);
        setInterval(displayNewRace, 5000);
    });
});

function displayNewRace() {
    $("#raceArea").fadeOut("slow");
    setTimeout(changeRace, 500);
    $("#raceArea").fadeIn("slow");
}

function changeRace() {
    getRandomRace();
    $("img").attr("src", raceSrc);
    $("img").attr("alt", raceName);
    $("#raceArea > h2").text(raceName);
}

//Math.random returns a number between 0 and .9999
//Math.floor chops off the decimal place to make an int
function randomInt(minInt, maxInt) {
    return Math.floor(minInt + Math.random() * (maxInt - minInt +1));
}

function getRandomRace() {
    //call randomInt(minInt = 0, maxInt = array length - 1)
    var $rand = randomInt(0, xml.find("race").length - 1); 
    //Pick out a random pokemon
    var $randomRace = $(xml.find("race")[$rand]);
    //Set the name and source to access them later
    raceName = $randomRace.children("name").text();
    raceSrc = $randomRace.children("img").attr("src");
}

Answer 1

我认为代码的错误在于您定义了局部变量xml而不是全局变量，以便您调用的函数（{{1} }）无法访问该变量。

不要在点击功能中使用getRandomRace，而是var xml = ...，或者甚至更好，使xml成为window.xml = ...函数的参数，以便它可以访问它。
祝你好运！

Javascript按钮单击功能不起作用

1 个答案: