Question

对不起，我对此很陌生，并且以前有C ++的经验，问题是可以在javascript / html中做吗。

我想在JavaScript中创建一个函数，该函数使用图像位置数组替换单击时的图像。是否有可能以某种方式在html中声明所需的变量（数组中的位置编号）？因此，我不必为每个单独的图像创建单独的功能。

在c ++中，您创建一个函数，然后在方括号内声明一个变量。是否可能在这里？如果没有，是否有任何解决方案？

JavaScript：

var imgArray = ["images/2.jpg","images/3.jpg"]

function newImage() {
  document.getElementById('pic').src = imgArray[1];
}

HTML：

<div class="project" id="ba">
   <p onclick="newImage()">Poster</p>
</div>

是否可以在html“ newImage（NUMBER）”中插入数字？

Answer 1

您可以从HTML发送索引号，并在javascript函数中将其作为参数接收：

function newImage(index) {
   document.getElementById('pic').src = imgArray[index];
}  

// in the html
<div class="project" id="ba">
     <p onclick="newImage(1)">Poster</p>
</div>

Answer 2

如果计划仅使用一个，则可以初始化一个计数器变量，该变量在每次单击“海报”标签并将其修改为images数组的长度时都会增加。它将循环可用图像。

var imgArray = ["images/2.jpg","images/3.jpg"]
var counter = 0;
function newImage() {
  document.getElementById('pic').src = imgArray[counter];
  counter = ++counter % imgArray.length;
}

<div class="project" id="ba">
   <p onclick="newImage()">Poster</p>
</div>
<img id="pic" src="#"/>

否则，将您的newImage()函数更新为具有参数newImage(index)，并在poster中传递所需的索引

Answer 3

您不能真正在HTML中声明变量。因此，不可能仅使用HTML来执行类似onclick="newImage(variable);"的操作。如果您使用的是ASP.NET之类的框架，则可以使用Razor执行诸如onclick="newImage(@variable);"之类的事情。我相信Angular，React等都可以提供类似的功能。

但是，还有其他方法可以在“原始”设置中实现类似的目的。

如果它只是一个静态数字，则可以不带任何变量地传递它。像onclick="newImage(3);"

您还可以设置一个value属性，该属性也可以在JavaScript中访问。类似于Poster。

然后用JS：

function newImage(){
   value = document.getElementById("poster").value;
   /* do something with the value */
}

如果您使用的是PHP，您还可以通过onclick函数将PHP变量传递给JavaScript，如here所示。如果您正在动态生成HTML（例如在PHP循环中）并且可能不想对每个单独的值进行硬编码，则建议使用此方法。

是否可以在html中声明Javascript函数变量？

3 个答案: