Question

我的网页上显示的图片和“下一张图片”按钮。单击该按钮时，我希望它通过调用javascript函数来更改显示的图像。我以为我已经把这个东西搞清楚了，直到我尝试它并且它不起作用之前都很兴奋。现在我无法弄清楚为什么它不起作用。

这是由下一个图像按钮调用的函数：

function showNext()
            {
                if (document.getElementById("Apples").style.display=="inline")
                {
                    document.getElementById("Apples").style.display="none";
                    document.getElementById("Grapes").style.display="inline";
                    document.getElementById("Strawberry").style.display="none";
                }
                else if (document.getElementById("Grapes").style.display=="inline")
                {
                    document.getElementById("Apples").style.display="none";
                    document.getElementById("Grapes").style.display="none";
                    document.getElementById("Strawberry").style.display="inline";
                }
                else (document.getElementById("Strawberry").style.display=="inline")
                {
                    document.getElementById("Apples").style.display="inline";
                    document.getElementById("Grapes").style.display="none";
                    document.getElementById("Strawberry").style.display="none";
                }
            }

这是我的图片的HTML：

<img id="Apples" src="/fruit/apples.jpg" height="267" width="400" alt="apples" />
        <img id="Grapes" src="/fruit/grapes.jpg" height="267" width="400" alt="grapes" />
        <img id="Strawberry" src="/fruit/strawberries.jpg" height="267" width="400" alt="grapes" />

这是我的按钮的html：

<input type="submit" value="Next Image" onClick="showNext();" />

Answer 1

在if语句中，您应该使用==而不是=。一个等号用于分配值;）

function showNext()
{
    if (document.getElementById("Apples").style.display=="inline")
    {
        document.getElementById("Apples").style.display="none";
        document.getElementById("Grapes").style.display="inline";
        document.getElementById("Strawberry").style.display="none";
    }
    else if (document.getElementById("Grapes").style.display=="inline")
    {
        document.getElementById("Apples").style.display="none";
        document.getElementById("Grapes").style.display="none";
        document.getElementById("Strawberry").style.display="inline";
    }
    else
    {
        document.getElementById("Apples").style.display="inline";
        document.getElementById("Grapes").style.display="none";
        document.getElementById("Strawberry").style.display="none";
    }
}

有关比较的更多信息，您可以查看this。

忽略了最后的其他电话，现在应该工作了。您不能在else语句中指定条件，如果是，则使用else：）。

Answer 2

可能是因为您没有在开始时定义display属性，因此如果满足条件则不会。如果您将javascript更改为此内容，那么第一次将display属性设置为第一次该怎么办：

function showNext()
{
    if (document.getElementById("Apples").style.display=="inline")
    {
        document.getElementById("Apples").style.display="none";
        document.getElementById("Grapes").style.display="inline";
        document.getElementById("Strawberry").style.display="none";
    }
    else if (document.getElementById("Grapes").style.display=="inline")
    {
        document.getElementById("Apples").style.display="none";
        document.getElementById("Grapes").style.display="none";
        document.getElementById("Strawberry").style.display="inline";
    }
    else
    {
        document.getElementById("Apples").style.display="inline";
        document.getElementById("Grapes").style.display="none";
        document.getElementById("Strawberry").style.display="none";
    }
}

Answer 3

假设HTML如：

<div id="img_wrapper">
    <img src="..." />
    <img src="..." />
    <img src="..." />
</div>

你使用这样的循环：

var wrapper = document.getElementById("img_wrapper");
var images = wrapper.getElementsByTagName("img");
var imgCt = images.length - 1; // account for zero-based indexing
var i1 = 1;

function showNext() {
    for (var i2 = 0; i2 < images.length; i2++) {
        images[i2].style.display = 'none';
    }

    images[i1].style.display = 'inline ';

    if (i1 < imgCt)
        i1++;
    } else {
        i1 = 0;
    }
}

http://jsfiddle.net/isherwood/FDf82

下一个按钮应在3个图像之间切换

3 个答案: