Question

单击按钮时，为什么没有出现第二个（鹰）图像？它直接显示了显示蚂蚁图像的else语句。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    android:layout_alignParentBottom="true">

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="1" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="2" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="3" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="4" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="5" />
</LinearLayout>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    android:layout_alignParentBottom="true">

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="6" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="7" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="8" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="9" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="10" />
</LinearLayout>
</RelativeLayout>

Answer 1

请在正文末尾添加脚本标记，以确保在访问任何元素之前呈现dom。（就像在我的例子中）您的代码存在的问题是，您需要为添加的每个新图像添加新的if。正如您自己注意到的那样，它变得难以理解和调试。对于像骑行这样的东西，在该数组的索引上使用数组和模运算。

使用此解决方案，您可以根据需要向图像阵列添加任意数量的图像，而无需触及代码/逻辑;

<!DOCTYPE html>
<html>
<body>
  <button onclick="changeImg()">change image</button>
  <img id="cycle" />

  <script>
    var imageElement = document.getElementById("cycle");
    var images = ["fox.jpg", "hawk.jpg", "ant.jpg"]; // add as many images as you want
    var counter = 0;
    imageElement.src = images[counter] // set the initial image

    function changeImg() {
      counter = (counter + 1) % images.length;     
      imageElement.src = images[counter];
    }
  </script>
</body>
</html>

Answer 2

document.getElementById("cycle").src总是有完整的图片网址（例如：https://example.loc/example/fox.jpg），这与fox.jpg不相似。您需要尝试另一种解决方案。尝试使用 cycle.getAttribute('src')

示例代码：

function changeImg() {
          let cycle = document.getElementById("cycle");
               console.log(cycle.src,cycle.getAttribute('src')); // show real value and taribute      
            if (cycle.getAttribute('src') == "fox.jpg") {
                cycle.src = "hawk.jpg";
            } else {cycle.src = "ant.jpg";
            }
        }

Answer 3

如果要访问属性的实际内容，请使用getAttribute('src')。否则，您将获得已解析的URL。

var cycle = document.getElementById("cycle");
if (cycle.getAttribute('src') == "fox.jpg") {
    cycle.src = "hawk.jpg";
} else {
    cycle.src = "ant.jpg";
}

使用javascript循环图像

3 个答案: