Question

我对JavaScript相对缺乏经验，而且我正在研究一个项目，这个项目已经变成了一场真正的试验，但我希望这是一个有着愚蠢直截了当的答案的问题。

我正在尝试编写一个脚本，通过更改不同链接的显示样式来显示/隐藏页面上的不同链接。

我想使用div元素，并且如果用户将不同的图像拖入div中，则可以使用不同的链接。链接是可点击的图片。

实施例 -

我希望只有在将“First_Image.png”拖放到div2中时才会显示此链接元素“链接”：

<a id='link' href='link.html' style='display: none;'><IMG src="../Image.png"></a>

我的div id是“div2”，它开始是空的：

<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

页面上的图像设置为：

    <IMG src="First_Image.png" id="First_Image" draggable="true" 
ondragstart="drag(event)">

页面上有几个这样的可放置图像。我对此脚本的尝试是：

<script>    
if (document.getElementById("div2").getElementsByTagName('img') == "First_Image")
   document.getElementById('link').style.display = 'block';
return (false);
</script>

我不确定我的问题是我是不是从div中的图像中获取了我认为的信息，或者我的简单if语句是不是我认为它正在做的事情。：/

Answer 1

如果您尝试从属性中获取值（因为src是属性）。您可以尝试Element.getAttribute。

https://developer.mozilla.org/en-US/docs/Web/API/Element.getAttribute

document.getElementById("div2").getElementsByTagName("img").getAttribute("src");

一步一步是：

var id = document.getElementById("div2");
var elem = id.getElementsByTagName("img");
var atr = elem.getAttribute("src");
/* for comparing */
if(atr == "First_Image.png") {
  return false;
}

这将产生以下结果： First_Image.png 。还写下这个：

return false; /* not (false) */

Answer 2

我认为错误在你的比较中

if (document.getElementById("div2").getElementsByTagName('img').src.indexOf("First_Image") > -1)

使用Javascript根据div中的内容显示/隐藏元素

2 个答案: