如何将动态值传递给 Javascript Function

How to pass dynamic value into Javascript Function?

本文关键字：Javascript Function 值传 动态      更新时间：2023-09-26

好的，这段代码工作正常

<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>

但是，在真正的应用程序中，我得到了许多图像和<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";
    }
}

但它不起作用

声明方法参数时不需要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";
    }
}

只需将其传入，离开var，即可完成。

不过，我会重构一堆东西，并使名称有意义，例如，

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

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

相关文章：