Question

图像替换功能适用于一个交换，但它不适用于另一个交换。我在代码中使用了完整的图像路径。

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Can Change Images</h1>

<img id="myImage" onclick="changeImage()" src="file://C:/Users/dell/Desktop/asd.png" width="100" height="180">

<p>Click the light bulb to turn on/off the light.</p>

<script>
function changeImage() {
    var image = document.getElementById('myImage');
    if (image.src.match("file://C:/Users/dell/Desktop/Capture.png")) {
        image.src = "file://C:/Users/dell/Desktop/asd.png";
    } else {
        image.src = "file://C:/Users/dell/Desktop/Capture.png";
    }
}
</script>

</body>
</html>

Answer 1

getAttribute()完全返回HTML中的内容。它可能是relative网址。

.src会返回完全限定的absolute网址，即使HTML中的内容是relative网址。

img.src将返回file:///C:/Users/dell/Desktop/asd.png之类的值，因此条件失败。

试试这个：

＆＃13;

function changeImage() {
  var image = document.getElementById('myImage');
  if (image.getAttribute('src').match("file://C:/Users/dell/Desktop/Capture.png")) {
    image.src = "file://C:/Users/dell/Desktop/asd.png";
  } else {
    image.src = "file://C:/Users/dell/Desktop/Capture.png";
  }
}

＆＃13;

<h1>JavaScript Can Change Images</h1>

<img id="myImage" onclick="changeImage()" src="file://C:/Users/dell/Desktop/asd.png" width="100" height="180">

<p>Click the light bulb to turn on/off the light.</p>

＆＃13;

Answer 2

你正在做两个不同的事情，一个是你正在使用一个html文档，你正在调用一个文件而另一个是图像所以不使用任何其他javascript事件你可以使用file：/// path

.btn {
  height: 90px;
  width: 100px;
}
.btn:not(:last-child)::after {
  position: absolute;
  right: -6px;
  z-index: 1;
  top: 50%;
  margin-top: -6px;
  display: inline-block;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid grey;
  content: '';
}
.btn.btn-primary::after {
  border-left: 6px solid #337ab7;
}
.btn.btn-primary::before {
  position: absolute;
  left: -1px;
  z-index: 1;
  top: 50%;
  margin-top: -6px;
  display: inline-block;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid #fff;
  content: '';
}
.btn-primary p {
  color: #fff;
}

图像交换不能在第二次运行

2 个答案: