Question

我的目标是将“down-arrow.svg”更改为“up-arrow.svg”，如果图像是“down-arrow.svg”，则单击包含此图像的上部div，反之亦然。

我查看了过去的问题和答案，找到了一些但无法解决我的问题，这些index.html和index.js文件从这里写的答案之一增长。我究竟做错了什么？提前谢谢。

的index.html：

<head>
    <title> Some Title </title>
    <script src="index.js"></script>
    <link type="text/css" href="stylesheet.css" rel="stylesheet">

</head>
<body>
...
    <div id="open-menu" onClick=changeArrow() >
        <div id="open-menu-inner" >
            <p id="open-menu-text" > Menü </p>
            <img id="up-down-arrow" src="svg/down-arrow.svg" >
        </div>
    </div>
...
</body>

index.js：

function changeArrow() {
    if (document.getElementById("up-down-arrow").src == "svg/down-arrow.svg") {
        document.getElementById("up-down-arrow").src = "svg/up-arrow.svg";
    }
    else {
        document.getElementById("up-down-arrow").src = "svg/down-arrow.svg";
    }
}

stylesheet.css中：

div#open-menu {
    height: 50px;
    width: 90%;
    border: 2px solid rgba(94, 94, 94, 0.5);
    position: absolute;
    margin-top: 180px;
    left: 50%;
    transform: translateX(-50%);
}

div#open-menu-inner {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    line-height: 50px;
    vertical-align: middle;
    display: table;
}

p#open-menu-text {
    font-size: 30px;
    color: #5e5e5e;
    position: absolute;
    right: 0px;
}

img#up-down-arrow {
    height: 26px;
    width: 26px;
    position: absolute;
    top: 50%;
    left: 0px;
    transform: translateY(50%);
    margin-left: 10px;
}

Answer 1

我认为你只需要改变你的图像来源而不是它的ID。

因此，使用您的HTML结构，我可以指导您更改img标记的ID。

解决方案如下：

＆＃13;

function changeArrow() {
  //First grabing the current Source in below varaiable.
  var img = document.getElementById('arrowSvg').src;
  
  /*
  ** Now checking if it does match with path that we have in variable.
  ** And updating src based on the current src of image.
  */
  if (img.indexOf('svg/down-arrow.svg') != -1) {
    document.getElementById('arrowSvg').src = 'svg/up-arrow.svg';
  } else {
    document.getElementById('arrowSvg').src = 'svg/down-arrow.svg';
  }
}

＆＃13;

div#open-menu {
  height: 50px;
  width: 90%;
  border: 2px solid rgba(94, 94, 94, 0.5);
  position: absolute;
  margin-top: 180px;
  left: 50%;
  transform: translateX(-50%);
}

div#open-menu-inner {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  line-height: 50px;
  vertical-align: middle;
  display: table;
}

p#open-menu-text {
  font-size: 30px;
  color: #5e5e5e;
  position: absolute;
  right: 0px;
}

img#up-down-arrow {
  height: 26px;
  width: 26px;
  position: absolute;
  top: 50%;
  left: 0px;
  transform: translateY(50%);
  margin-left: 10px;
}

＆＃13;

<div id="open-menu" onClick=changeArrow()>
  <div id="open-menu-inner">
    <p id="open-menu-text"> Menü </p>
    <img id="arrowSvg" src="svg/down-arrow.svg">
  </div>
</div>

＆＃13;

希望这会对您有所帮助。

谢谢！

Answer 2

这个问题应该在你的路径上，来自谷歌的图片可以正常工作：

＆＃13;

function changeArrow() {
    if (document.getElementById("up-down-arrow").src == "https://d30y9cdsu7xlg0.cloudfront.net/png/242277-200.png") {
        document.getElementById("up-down-arrow").src = "https://upload.wikimedia.org/wikipedia/commons/thumb/3/37/Octicons-arrow-small-up.svg/1000px-Octicons-arrow-small-up.svg.png";
    }
    else {
        document.getElementById("up-down-arrow").src = "https://d30y9cdsu7xlg0.cloudfront.net/png/242277-200.png";
    }
}

＆＃13;

div#open-menu {
    height: 50px;
    width: 90%;
    border: 2px solid rgba(94, 94, 94, 0.5);
    position: absolute;
    margin-top: 180px;
    left: 50%;
    transform: translateX(-50%);
}

div#open-menu-inner {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    line-height: 50px;
    vertical-align: middle;
    display: table;
}

p#open-menu-text {
    font-size: 30px;
    color: #5e5e5e;
    position: absolute;
    right: 0px;
}

img#up-down-arrow {
    height: 26px;
    width: 26px;
    position: absolute;
    top: 50%;
    left: 0px;
    transform: translateY(50%);
    margin-left: 10px;
}

＆＃13;

<head>
    <title> Some Title </title>
    <script src="index.js"></script>
    <link type="text/css" href="stylesheet.css" rel="stylesheet">

</head>
<body>
    <div id="open-menu" onClick=changeArrow() >
        <div id="open-menu-inner" >
            <p id="open-menu-text" > Menü </p>
            <img id="up-down-arrow" src="https://d30y9cdsu7xlg0.cloudfront.net/png/242277-200.png" >
        </div>
    </div>
</body>

＆＃13;

Answer 3

替换

document.getElementById("up-down-arrow").src

带

document.getElementById("up-down-arrow").getAttribute('src')

src 会返回图片的完整网址
getAttribute（＆＃39; src＆＃39;）完全返回HTML中的内容，即您编写它的方式

PS。我还想对您当前的HTML页面提出一些可能的改进建议：

我建议在关闭它之前将JS导入从头部移动到body标签的底部。这将确保在下载JS文件之前呈现网页正文，这将使页面呈现给最终用户更快。
（这是因为浏览器渲染html的方式是执行它是逐行的，这意味着它将在执行其后的任何其他内容之前停止下载javascript文件，即向用户显示网页正文。）
我还建议用JS文件中的eventListener替换内联onClick函数，这样你就可以将HTML和JS文件分开，这将使你的网站在大小增加时更易于维护

根据你的DOM的大小，它可能更快存储，即缓存，＆＃34;上下箭头＆＃34;变量中的节点，以避免每次用户点击它时查询DOM内该节点的性能成本，即

$up_down_arrow = document.getElementById("up-down-arrow");

if ($up_down_arrow.getAttribute('src') === "bin2-lighter.svg") {
    $up_down_arrow.setAttribute('src', 'bin2-darker.svg')
} else {
    $up_down_arrow.setAttribute('src', 'bin2-lighter.svg');
}

Answer 4

作为替代方法，您可以使用classList.toggle。 toggle的想法是，如果该元素不存在，它将添加该类，如果它存在则将其删除。它也会更加优化。将图像放入类中并切换该类onClick，如下例所示;请参阅有关css的arrow-up以及如何在javascript部分toggle中使用它。最初<div id="arrow"..已经有一个arrow类，这就是为什么你会看到一个向下箭头的图标，当触发切换时，该元素将变为<div id="arrow" class="arrow arrow-up"></div>和<div id="arrow" class="arrow"></div>或者。 arrow-up类的切换会产生更改箭头图标的效果。

function changeArrow() {
	 var element = document.getElementById("arrow");
     element.classList.toggle("arrow-up");
}

.open-menu {
	padding: 20px;
	position: absolute;
	cursor: pointer;
	background-color: #000000;
}

.arrow {
	width: 16px;
	height: 16px;
	background: url('http://www.entypo.com/images/chevron-down.svg') no-repeat;
}

.arrow-up {
	background: url('http://www.entypo.com/images/chevron-up.svg') no-repeat !important;
}

<div class="open-menu" onClick="changeArrow()" >
	<div id="arrow" class="arrow"></div>
</div>

图像用于www.entypo.com的样本版权

在div上按下时如何更改图像？

4 个答案: