Question

显示鼠标悬停的图像，清除<ul> 但是当我将src的{{1}} 属性存储在一个变量它返回两个不同的<img>。喜欢的src 图像，在该点和由子串修改的一个例如：

//图像/ Hassum_Harrod_03.jpg
//图像/ Hassum_Harrod.jpg

我只想要一个输出而不是两个为什么会发生这种情况请给出一个理由。

注意

如果src THUMBNAIL
如果<img src="images/Hassum_Harrod_03_tn.jpg" /> 完整图片

HTML CODE

<img src="images/Hassum_Harrod_03" />

的Javascript

<body>
  <div id="art">
  <h2>Art Preview</h2>
  <p>Mouse over the following pieces of art to preview a large version</p>
    <ul class="grid">
      <li><img src="images/Hassum_Harrod_03_tn.jpg" alt="Hassum Harod's Summer Trees"></li>
      <li><img src="images/LaVonne_LaRue_02_tn.jpg" alt="LaVonne_LaRue's Mighty Duck"></li>
      <li><img src="images/Lorenzo_Garcia_01_tn.jpg" alt="Lorenzo Garcia's The Dancer"></li>
                           <--FEW OTHER <li>'s-->
    </div>
  <script src="script.js"></script>
</body>

Answer 1

第一次将鼠标悬停在“Hassum_Harrod_03_tn.jpg”上时，代码为：

getAtt.substring(0,getAtt.length-7)+".jpg"

应该返回“images / Hassum_Harrod_03.jpg”。但是当它运行到：

var createElement = document.createElement("img");
createElement.setAttribute("src",getAtt + ".jpg");
ulNode.innerHTML="";
ulNode.appendChild(createElement);

现在DOM被破坏了，因为“ul”元素根本不包含“li”，而是“img”。

请注意，“鼠标悬停”绑定仍然有效，因为“ul”仍然存在。

然后在“Hassum_Harrod_03.jpg”上的第二个鼠标悬停将获得“Hassum_Harrod.jpg”并且代码中的“ulNode”不再是“ul”而是上部“div”节点。并且“鼠标悬停”绑定失败，因为不存在“ul”。

Answer 2

我想这会奏效！

＆＃13;

document.querySelector('.grid').addEventListener('mouseover', function(e) {
  if (e.target.tagName === 'IMG') {

    ulNode = e.target.parentNode.parentNode;

    var getAtt = e.target.getAttribute('src');
    var imgLoc = getAtt.substring(0,getAtt.length-7)+".jpg";
    console.log(imgLoc); //images/Hassum_Harrod_03.jpg
                        //images/Hassum_Harrod.jpg


    var createElement = document.createElement("img");
    createElement.setAttribute("src",getAtt + ".jpg");
    ulNode.innerHTML="";
    ulNode.appendChild(createElement);

  } // check to see that I clicked on IMG only
}, false); // click event

＆＃13;

<div id="art">
  <h2>Art Preview</h2>
  <p>Mouse over the following pieces of art to preview a large version</p>
  <ul class="grid">
    <li><img src="images/Hassum_Harrod_03_tn.jpg" alt="Hassum Harod's Summer Trees" /></li>
    <li><img src="images/LaVonne_LaRue_02_tn.jpg" alt="LaVonne_LaRue's Mighty Duck" /></li>
    <li><img src="images/Lorenzo_Garcia_01_tn.jpg" alt="Lorenzo Garcia's The Dancer" /></li>
  </ul>
</div>

＆＃13;

原因是，onMouseOver事件通过将图像更改为完整版本来绑定图像。这就是你得到这个原因的原因。

Answer 3

您正面临这个问题，因为您的所有img元素（也是您动态创建的）的绑定鼠标悬停事件只是检查鼠标悬停功能的类名将起作用，我想。

document.querySelector('.grid').addEventListener('mouseover', function(e) {
  if (e.target.tagName === 'IMG') {

    ulNode = e.target.parentNode.parentNode;
      if(ulNode.className == 'grid'){

    var getAtt = e.target.getAttribute('src');
    var imgLoc = getAtt.substring(0,getAtt.length-7)+".jpg";
    alert(imgLoc); //images/Hassum_Harrod_03.jpg
                        //images/Hassum_Harrod.jpg


    var createElement = document.createElement("img");
    createElement.setAttribute("src",imgLoc);
    ulNode.innerHTML="";
    ulNode.appendChild(createElement);
      }
  } // check to see that I clicked on IMG only
}, false); // click event

Answer 4

document.querySelector（'。grid'）。addEventListener（'mouseover'，function（e）{ if（e.target.tagName ==='IMG'）{

ulNode = e.target.parentNode.parentNode;
ulNode.innerHTML="";
var getAtt = e.target.getAttribute('src');
var imgLoc = getAtt.substring(0,getAtt.length-7)+".jpg";
console.log(imgLoc); //images/Hassum_Harrod_03.jpg
                    //images/Hassum_Harrod.jpg


var createElement = document.createElement("img");
createElement.setAttribute("src",imgLoc);

ulNode.appendChild(createElement);

} //检查我是否仅点击过IMG }，false）; //点击事件

Javascript，sytax返回两个不同的值？

4 个答案: