Question

我必须创建一个页面，您可以使用图形界面选择选项，然后显示成品。

为了简化，只需知道有三个变量 - 顶部，底部，颜色。

每个变量有3种类型。 TopStyle1，TopStyle2，TopStyle3 ... BottomStyle1，BottomStyle2，BottomStyle3 ... Color1，Color2，Color3。

所以每个样式都有一个图像，所以当你选择（onClick）TopStyle1时。我代表TopStyle1的图像变为＆＃34; On＆＃34;状态（只是一个不同的图像，周围有一个金色圆圈表示您的选择），TopStyle2和TopStyle3变为＆＃34;未选中＆＃34;状态（图像变为灰色的自身版本）。如果再次单击TopStyle1，则所有样式都会更改为＆＃34; Off＆＃34;国家（他们的原始图片）。

我发现代码可以完成所有这些，可能不是最有效的方法，但它可以正常工作

function topstyle1() {

    if (document.getElementById("style1-top").src == "<%= bse%>images/style1-top-OFF.jpg") 
    {
        document.getElementById("style1-top").src = "<%= bse%>images/style1-top-ON.jpg";
        document.getElementById("style2-top").src = "<%= bse%>images/style2-top-DIS.jpg";
        document.getElementById("style3-top").src = "<%= bse%>images/style3-top-DIS.jpg";
        var top="style1";
    }
    else if (document.getElementById("style1-top").src == "<%= bse%>images/style1-top-DIS.jpg") 
    {
        document.getElementById("style1-top").src = "<%= bse%>images/style1-top-ON.jpg";
        document.getElementById("style2-top").src = "<%= bse%>images/style2-top-DIS.jpg";
        document.getElementById("style3-top").src = "<%= bse%>images/style3-top-DIS.jpg";
        var top="style1";
    }
    else 
    {
        document.getElementById("style1-top").src = "<%= bse%>images/style1-top-OFF.jpg";
        document.getElementById("style2-top").src = "<%= bse%>images/style2-top-OFF.jpg";
        document.getElementById("style3-top").src = "<%= bse%>images/style3-top-OFF.jpg";
        var top="";
    }
}

function topstyle2() {

    if (document.getElementById("style2-top").src == "<%= bse%>images/style2-top-OFF.jpg") 
    {
        document.getElementById("style1-top").src = "<%= bse%>images/style1-top-DIS.jpg";
        document.getElementById("style2-top").src = "<%= bse%>images/style2-top-ON.jpg";
        document.getElementById("style3-top").src = "<%= bse%>images/style3-top-DIS.jpg";
        var top="style2";
    }
    else if (document.getElementById("style2-top").src == "<%= bse%>images/style2-top-DIS.jpg") 
    {
        document.getElementById("style1-top").src = "<%= bse%>images/style1-top-DIS.jpg";
        document.getElementById("style2-top").src = "<%= bse%>images/style2-top-ON.jpg";
        document.getElementById("style3-top").src = "<%= bse%>images/style3-top-DIS.jpg";
        var top="style2";
    }
    else 
    {
        document.getElementById("style1-top").src = "<%= bse%>images/style1-top-OFF.jpg";
        document.getElementById("style2-top").src = "<%= bse%>images/style2-top-OFF.jpg";
        document.getElementById("style3-top").src = "<%= bse%>images/style3-top-OFF.jpg";
        var top="";
    }
}

function topstyle3() {

    if (document.getElementById("style3-top").src == "<%= bse%>images/style3-top-OFF.jpg") 
    {
        document.getElementById("style1-top").src = "<%= bse%>images/style1-top-DIS.jpg";
        document.getElementById("style2-top").src = "<%= bse%>images/style2-top-DIS.jpg";
        document.getElementById("style3-top").src = "<%= bse%>images/style3-top-ON.jpg";
        var top="style3";
    }
    else if (document.getElementById("style3-top").src == "<%= bse%>images/style3-top-DIS.jpg") 
    {
        document.getElementById("style1-top").src = "<%= bse%>images/style1-top-DIS.jpg";
        document.getElementById("style2-top").src = "<%= bse%>images/style2-top-DIS.jpg";
        document.getElementById("style3-top").src = "<%= bse%>images/style3-top-ON.jpg";
        var top="style3";
    }
    else 
    {
        document.getElementById("style1-top").src = "<%= bse%>images/style1-top-OFF.jpg";
        document.getElementById("style2-top").src = "<%= bse%>images/style2-top-OFF.jpg";
        document.getElementById("style3-top").src = "<%= bse%>images/style3-top-OFF.jpg";
        var top="";
    }
}

在每个功能结束时，在图像发生变化后，我试图根据调用的函数设置变量。

因此，如果您点击TopStyle1，则var top =＆＃34; style1＆＃34; ...如果你把它改成TopStyle2 var top =＆＃34; style2＆＃34;等等。

在您选择了Top，Bottom和Color之后，会出现一个按钮，表示＆＃34;查看已完成的项目。＆＃34;当您单击此按钮时，我想调用一个新功能，该功能将根据您的选择显示图像。现在，我很乐意只显示变量中的文字，但我不知道如何让它们出现。

我试过这个：

function changeImage() {
    document.getElementById("display").innerHTML=top;
    }

但是当我到达这一点时，我认为变量的内容已经消失了。

必须有一种方法根据我的选择设置变量，然后在另一个函数中调用它们，但是由于我的经验不足，我很难找到答案。

Answer 1

将你的top变量放在函数范围之外

var top = "";
function topstyle1() {

if (document.getElementById("style1-top").src == "<%= bse%>images/style1-top-OFF.jpg") 
{
    document.getElementById("style1-top").src = "<%= bse%>images/style1-top-ON.jpg";
    document.getElementById("style2-top").src = "<%= bse%>images/style2-top-DIS.jpg";
    document.getElementById("style3-top").src = "<%= bse%>images/style3-top-DIS.jpg";
    top="style1";
}
else if (document.getElementById("style1-top").src == "<%= bse%>images/style1-top-DIS.jpg") 
{
    document.getElementById("style1-top").src = "<%= bse%>images/style1-top-ON.jpg";
    document.getElementById("style2-top").src = "<%= bse%>images/style2-top-DIS.jpg";
    document.getElementById("style3-top").src = "<%= bse%>images/style3-top-DIS.jpg";
    top="style1";
}
else 
{
    document.getElementById("style1-top").src = "<%= bse%>images/style1-top-OFF.jpg";
    document.getElementById("style2-top").src = "<%= bse%>images/style2-top-OFF.jpg";
    document.getElementById("style3-top").src = "<%= bse%>images/style3-top-OFF.jpg";
    top="";
}

}

function topstyle2（）{

if (document.getElementById("style2-top").src == "<%= bse%>images/style2-top-OFF.jpg") 
{
    document.getElementById("style1-top").src = "<%= bse%>images/style1-top-DIS.jpg";
    document.getElementById("style2-top").src = "<%= bse%>images/style2-top-ON.jpg";
    document.getElementById("style3-top").src = "<%= bse%>images/style3-top-DIS.jpg";
    top="style2";
}
else if (document.getElementById("style2-top").src == "<%= bse%>images/style2-top-DIS.jpg") 
{
    document.getElementById("style1-top").src = "<%= bse%>images/style1-top-DIS.jpg";
    document.getElementById("style2-top").src = "<%= bse%>images/style2-top-ON.jpg";
    document.getElementById("style3-top").src = "<%= bse%>images/style3-top-DIS.jpg";
    top="style2";
}
else 
{
    document.getElementById("style1-top").src = "<%= bse%>images/style1-top-OFF.jpg";
    document.getElementById("style2-top").src = "<%= bse%>images/style2-top-OFF.jpg";
    document.getElementById("style3-top").src = "<%= bse%>images/style3-top-OFF.jpg";
    top="";
}

}

function topstyle3（）{

if (document.getElementById("style3-top").src == "<%= bse%>images/style3-top-OFF.jpg") 
{
    document.getElementById("style1-top").src = "<%= bse%>images/style1-top-DIS.jpg";
    document.getElementById("style2-top").src = "<%= bse%>images/style2-top-DIS.jpg";
    document.getElementById("style3-top").src = "<%= bse%>images/style3-top-ON.jpg";
    top="style3";
}
else if (document.getElementById("style3-top").src == "<%= bse%>images/style3-top-DIS.jpg") 
{
    document.getElementById("style1-top").src = "<%= bse%>images/style1-top-DIS.jpg";
    document.getElementById("style2-top").src = "<%= bse%>images/style2-top-DIS.jpg";
    document.getElementById("style3-top").src = "<%= bse%>images/style3-top-ON.jpg";
    top="style3";
}
else 
{
    document.getElementById("style1-top").src = "<%= bse%>images/style1-top-OFF.jpg";
    document.getElementById("style2-top").src = "<%= bse%>images/style2-top-OFF.jpg";
    document.getElementById("style3-top").src = "<%= bse%>images/style3-top-OFF.jpg";
    top="";
}

}

Answer 2

您需要在函数之外声明“top”变量才能实现此目的。

var x = 0;
function increase_x() {
    x++;
}
function decrease_x() {
    x--;
}

http://jsfiddle.net/6LhtX/

Answer 3

您需要使用变量的适当范围。以下面的例子为例：

var top;

function set_top(){
    top = 'Hello World';
}

function log_top(){
    console.log( top );
}

set_top();
log_top();

控制台会记录“Hello World＆＃39;”，因为变量top是一个全局变量。它可以在所有功能中访问，并且可以随时使用/覆盖。目前你拥有它的方式，变量top只能在每个函数内部访问（使其成为局部变量或局部范围）。

有关此内容的更多信息，我建议您查看：What is the scope of variables in JavaScript?

使用Javascript在一个函数中设置变量，然后在第二个函数中调用它

3 个答案: