Question

好的，这段代码工作正常

<html>
<body>
<p>This is question.</p>
<img src="http://cliparts.co/cliparts/qTB/5yd/qTB5ydpzc.gif" alt="show answer" height="42" 

width="42" id="showHideImg" onclick="myFunction()">
<p id="showHide">This answer.</p>
<script type="text/javascript">

function myFunction() {
    if (document.getElementById("showHide").style.display=="none")
    {
      document.getElementById("showHide").style.display="block";
    }
    else
    {
      document.getElementById("showHide").style.display="none";
    }
}

</script>  

</body>
</html>

然而，在真正的应用程序中，我得到了许多图像＆amp; <p>如下：

<p>This is question1.</p>
<img src="http://cliparts.co/cliparts/qTB/5yd/qTB5ydpzc.gif" alt="show answer" height="42" 

width="42" id="showHideImg" onclick="myFunction()">
<p id="showHide1">This answer1.</p>

<p>This is question2.</p>
<img src="http://cliparts.co/cliparts/qTB/5yd/qTB5ydpzc.gif" alt="show answer" height="42" 

width="42" id="showHideImg" onclick="myFunction()">
<p id="showHide2">This answer2.</p>

.......question 3... 4....5...

我的问题是如何修改myFunction()以便它可以动态申请许多images

我尝试了以下内容：

<p>This is question1.</p>
<img src="http://cliparts.co/cliparts/qTB/5yd/qTB5ydpzc.gif" alt="show answer" height="42" 

width="42" id="showHideImg" onclick="myFunction(1)">
<p id="showHide1">This answer1.</p>
<script type="text/javascript">

function myFunction(var no) {
    if (document.getElementById("showHide"+no).style.display=="none")
    {
      document.getElementById("showHide"+no).style.display="block";
    }
    else
    {
      document.getElementById("showHide"+no).style.display="none";
    }
}

但它不起作用

Answer 1

在声明方法参数时，您不需要var。

尝试以下方法：

function myFunction(no) {
    if (document.getElementById("showHide"+no).style.display=="none")
    {
      document.getElementById("showHide"+no).style.display="block";
    }
    else
    {
      document.getElementById("showHide"+no).style.display="none";
    }
}

Answer 2

只需将其传入，取消var，即可完成。

我重构了一堆东西，并使名字有意义，例如，

function toggleEl(num) {
    var el = document.getElementById("showHide" + num)
      , currStyle = el.style.display
      , nextStyle = curr === "none" ? "block" : "none"
      ;

    el.style.display = nextStyle;
}

（请注意，toggle()可能足以满足您的最终需求。）

如何将动态值传递给Javascript函数？

2 个答案: