如何使用事件侦听器单击功能使用javascript显示和隐藏数组中的图像

时间：2018-03-04 06:38:20

标签： javascript arrays for-loop event-listener

所以我需要在页面上将促销图像显示为横幅。我在横幅下面有4个按钮。每个按钮对应一个不同的促销图像横幅。

我想使用带有点击功能的eventlistener来显示每个相应的图像，但一次只能显示一个。这是我尝试使用的javascript，但似乎无法正常工作。

＆＃13;
＆＃13; 
var btn1 = document.getElementById("promo_button1");
var btn2 = document.getElementById("promo_button2");
var btn3 = document.getElementById("promo_button3");
var btn4 = document.getElementById("promo_button4");

var img1 = document.getElementById("promo1");
var img2 = document.getElementById("promo2");
var img3 = document.getElementById("promo3");
var img4 = document.getElementById("promo4");

var imgArray = [img1, img2, img3, img4];

function showImg(img) {
  for (i = 0; i < imgArray.length; i++) {
    imgArray[i].style.display = "none";
  }
  img.style.display = "block";
}


btn1.addEventListener("click", function() {
  showImg(img1);
});
btn2.addEventListener("click", function() {
  showImg(img2);
});
btn3.addEventListener("click", function() {
  showImg(img3);
});
btn4.addEventListener("click", function() {
  showImg(img4);
});
＆＃13; 
<div class="section group">
  <div class="col span_1_of_6">
  </div>
  <div class="col span_4_of_6">
    <div class="promo" id="promo1">
      <a href="cat_suits.html" border="0"><img src="img/banner_suits.jpg" alt="Suits on sale!" /></a>
    </div>
    <div class="promo" id="promo2" style="display:none">
      <a href="cat_suits.html" border="0"><img src="img/banner_shoes.jpg" alt="Shoes on sale!" /></a>
    </div>
    <div class="promo" id="promo3" style="display:none">
      <a href="cat_suits.html" border="0"><img src="img/banner_shirts.jpg" alt="Shirts on sale!" /></a>
    </div>
    <div class="promo" id="promo4" style="display:none">
      <a href="cat_suits.html" border="0"><img src="img/banner_pants.jpg" alt="Pants on sale!" /></a>
    </div>
  </div>
  <div class="col span_1_of_6">
  </div>

  <div class="section group">
    <div class="col span_1_of_6">
    </div>
    <div class="col span_1_of_6">
      <a href="">
        <div class="promo_button" id="promo_button1">
          Suits
        </div>
      </a>
    </div>
    <div class="col span_1_of_6">
      <a href="">
        <div class="promo_button" id="promo_button2">
          Shoes
        </div>
      </a>
    </div>
    <div class="col span_1_of_6">
      <a href="">
        <div class="promo_button" id="promo_button3">
          Shirts
        </div>
      </a>
    </div>
    <div class="col span_1_of_6">
      <a href="">
        <div class="promo_button" id="promo_button4">
          Pants
        </div>
      </a>
    </div>
    <div class="col span_1_of_6">
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

4 个答案:

答案 0 :(得分：1)

您的代码工作得很好，只是a包裹所有<div class="promo_button"空白href=""导致此问题。

因此，不应该保留导致页面重定向的href=""，而应该只有href="#"和onclick，return false。

＆＃13;
＆＃13; 
var btn1 = document.getElementById("promo_button1");
var btn2 = document.getElementById("promo_button2");
var btn3 = document.getElementById("promo_button3");
var btn4 = document.getElementById("promo_button4");

var img1 = document.getElementById("promo1");
var img2 = document.getElementById("promo2");
var img3 = document.getElementById("promo3");
var img4 = document.getElementById("promo4");

var imgArray = [img1, img2, img3, img4];

function showImg(img) {
  for (i = 0; i < imgArray.length; i++) {
    imgArray[i].style.display = "none";
  }
  img.style.display = "block";
}


btn1.addEventListener("click", function(e) {
  showImg(img1);
});
btn2.addEventListener("click", function(e) {
  showImg(img2);
});
btn3.addEventListener("click", function(e) {
  showImg(img3);
});
btn4.addEventListener("click", function(e) {
  showImg(img4);
});
＆＃13; 
<div class="section group">
  <div class="col span_1_of_6">
  </div>
  <div class="col span_4_of_6">
    <div class="promo" id="promo1">
      <a href="cat_suits.html" border="0"><img src="img/banner_suits.jpg" alt="Suits on sale!" /></a>
    </div>
    <div class="promo" id="promo2" style="display:none">
      <a href="cat_suits.html" border="0"><img src="img/banner_shoes.jpg" alt="Shoes on sale!" /></a>
    </div>
    <div class="promo" id="promo3" style="display:none">
      <a href="cat_suits.html" border="0"><img src="img/banner_shirts.jpg" alt="Shirts on sale!" /></a>
    </div>
    <div class="promo" id="promo4" style="display:none">
      <a href="cat_suits.html" border="0"><img src="img/banner_pants.jpg" alt="Pants on sale!" /></a>
    </div>
  </div>
  <div class="col span_1_of_6">
  </div>

  <div class="section group">
    <div class="col span_1_of_6">
    </div>
    <div class="col span_1_of_6">
      <a href="#" onclick="return false;">
        <div class="promo_button" id="promo_button1">
          Suits
        </div>
      </a>
    </div>
    <div class="col span_1_of_6">
      <a href="#" onclick="return false;">
        <div class="promo_button" id="promo_button2">
          Shoes
        </div>
      </a>
    </div>
    <div class="col span_1_of_6">
      <a href="#" onclick="return false;">
        <div class="promo_button" id="promo_button3">
          Shirts
        </div>
      </a>
    </div>
    <div class="col span_1_of_6">
      <a href="#"  onclick="return false;">
        <div class="promo_button" id="promo_button4">
          Pants
        </div>
      </a>
    </div>
    <div class="col span_1_of_6">
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

首先，我已将代码缩减为StackOverflow上的MCVE（我删除了与问题无直接关系的所有代码）。

其次，我删除了您使用的所有id属性，不需要它们。

第三，可以看到一些东西我用占位符熊替换了你的本地img urls。

这就是我想出的：

// create an array holding the img DOM objects
let images = Array.from(document.querySelectorAll('.promo'));

// create an array from the buttons and iterate over it, 
// passing each button (as btn) and the index (as index)
// into each iteration
Array.from(document.querySelectorAll('.promo_button')).forEach((btn, index) => {
  // add a click event listener to the button
  btn.addEventListener('click', () => {
    // on click of a button, iterate over the images
    images.forEach((img, idx) => {
      // change style property of img to 
      // - none if the index of the image does not
      //   match the index of the button clicked
      // - block if both indexes match
      img.style.display = (index === idx ? 'block' : 'none');
      // using a ternary expression, which does the same as
      // if (index === idx) {
      //   img.style.display = 'block';
      // } else {
      //   img.style.display = 'none';
      // }
    })
  })
})
<img src="https://placebear.com/200/300" alt="bear 1" class="promo" />
<img src="https://placebear.com/300/300" alt="bear 2" class="promo" style="display:none" />
<img src="https://placebear.com/300/200" alt="bear 3" class="promo" style="display:none" />
<img src="https://placebear.com/200/200" alt="bear 4" class="promo" style="display:none" />
<hr />
<button class="promo_button">Suits</button>
<button class="promo_button">Shoes</button>
<button class="promo_button">Shirts</button>
<button class="promo_button">Pants</button>

这个相同的Javascript也适用于任意数量的图像和相应数量的按钮。以编程方式添加按钮会更加优雅：

let images = Array.from(document.querySelectorAll('.promo'));

// for each image, create a button to show it
// and outright attach the click handler to each button
images.forEach((img, index) => {
  let btn = document.createElement('button');
  let btnText = document.createTextNode(img.getAttribute('alt'));
  btn.appendChild(btnText);
  btn.classList.add('promo_button');
  btn.addEventListener('click', () => {
    images.forEach((img, idx) => {
      img.style.display = (index === idx ? 'block' : 'none');
    })
  })
  document.body.append(btn);
})
<img src="https://placebear.com/200/300" alt="bear 1" class="promo" />
<img src="https://placebear.com/300/300" alt="bear 2" class="promo" style="display:none" />
<img src="https://placebear.com/300/200" alt="bear 3" class="promo" style="display:none" />
<img src="https://placebear.com/200/200" alt="bear 4" class="promo" style="display:none" />
<hr />

修改

我刚看到你正在为网页设计课做这件事。根据您的老师的知识，这个Javascript代码可能对他们来说太高级了。如果你需要更多的解释，那么就行了......请问。

答案 2 :(得分：0)

您需要阻止锚标记的默认操作，写锚href=""不正确。您可以使用href="javascript:void(0);"

您希望使用链接的href执行此操作的原因通常是，javascript: URL会将浏览器重定向到评估该JavaScript的结果的纯文本版本。但如果结果为undefined，则浏览器会保留在同一页面上。 void(0)只是一个简短的脚本，其评估结果为undefined。

＆＃13;
＆＃13; 
var btn1 = document.getElementById("promo_button1");
var btn2 = document.getElementById("promo_button2");
var btn3 = document.getElementById("promo_button3");
var btn4 = document.getElementById("promo_button4");

var img1 = document.getElementById("promo1");
var img2 = document.getElementById("promo2");
var img3 = document.getElementById("promo3");
var img4 = document.getElementById("promo4");

var imgArray = [img1, img2, img3, img4];

function showImg(img) {
  for (i = 0; i < imgArray.length; i++) {
    imgArray[i].style.display = "none";
  }
  img.style.display = "block";
}


btn1.addEventListener("click", function() {
  showImg(img1);
});
btn2.addEventListener("click", function() {
  showImg(img2);
});
btn3.addEventListener("click", function() {
  showImg(img3);
});
btn4.addEventListener("click", function() {
  showImg(img4);
});
＆＃13; 
<div class="section group">
  <div class="col span_1_of_6">
  </div>
  <div class="col span_4_of_6">
    <div class="promo" id="promo1">
      <a href="cat_suits.html" border="0"><img src="img/banner_suits.jpg" alt="Suits on sale!" /></a>
    </div>
    <div class="promo" id="promo2" style="display:none">
      <a href="cat_suits.html" border="0"><img src="img/banner_shoes.jpg" alt="Shoes on sale!" /></a>
    </div>
    <div class="promo" id="promo3" style="display:none">
      <a href="cat_suits.html" border="0"><img src="img/banner_shirts.jpg" alt="Shirts on sale!" /></a>
    </div>
    <div class="promo" id="promo4" style="display:none">
      <a href="cat_suits.html" border="0"><img src="img/banner_pants.jpg" alt="Pants on sale!" /></a>
    </div>
  </div>
  <div class="col span_1_of_6">
  </div>

  <div class="section group">
    <div class="col span_1_of_6">
    </div>
    <div class="col span_1_of_6">
      <a href="javascript:void(0);">
        <div class="promo_button" id="promo_button1">
          Suits
        </div>
      </a>
    </div>
    <div class="col span_1_of_6">
      <a href="javascript:void(0);">
        <div class="promo_button" id="promo_button2">
          Shoes
        </div>
      </a>
    </div>
    <div class="col span_1_of_6">
      <a href="javascript:void(0);">
        <div class="promo_button" id="promo_button3">
          Shirts
        </div>
      </a>
    </div>
    <div class="col span_1_of_6">
      <a href="javascript:void(0);">
        <div class="promo_button" id="promo_button4">
          Pants
        </div>
      </a>
    </div>
    <div class="col span_1_of_6">
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

您的初始问题出在您的HTML中，其中包含围绕.promo_button元素的锚标记。锚标记的href属性设置为空字符串，＆＃34;＆＃34;。

一些建议：我会尽量避免在HTML中添加内联样式，因为随着项目的增长，它们很难找到。当您需要引用一组相关的HTML元素时，document.querySelector和document.querySelectorAll是比document.getElementByXXX更好的解决方案。由于document.querySelectorAll将项目分配给NodeList数组，因此您可以访问每个元素，而无需在HTML中分配ID或在JavaScript中分配单个变量名称。您可以对HTMLCollections进行相同的操作，但我认为它们的局限性更大。

＆＃13;
＆＃13; 
/*Assign .promo_button elements to a NodeList(Array-like)*/
var btn_list = document.querySelectorAll('.promo_button');


/*Assign .promo elements to a NodeList(Array-like)*/
var img_list = document.querySelectorAll('.promo');


/*Displays image associated with button pressed, hides other images
  Assumes image and its corresponding button will be at same index
*/
function showImg() {
  //for...of is ES6, a simple forloop can also do the trick but requires more code
  //.entries allows you to access key/value pairs of the NodeList
  for (var [index, btn] of btn_list.entries()) {
    img_list[index].style.display = "none";
    if (btn == document.activeElement) {
      img_list[index].style.display = 'block';
    }
  }
}

/*Assign click listener to .promo_button elements*/
for (btn of btn_list) {
  btn.onclick = showImg;
}
＆＃13; 
.promo {
  display: none;
  /*hides all images when page loads*/
  border: 0;
}


/*displays first image when page loads*/

.promo:nth-of-type(1) {
  display: block;
}


/*sets fixed dimensions on images*/

.promo a img {
  height: 100px;
  width: 60px;
}

.promo_button {
  min-width: 60px;
}
＆＃13; 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

<!-- HTML CHANGES: added links to image tag's src attribute, removed inline styles  -->  
  
<div class="section group">
  <div class="col span_1_of_6">
  </div>
  <div class="col span_4_of_6">
    <div class="promo" id="promo1">
      <a href="cat_suits.html" ><img src="https://media.istockphoto.com/photos/unrecognizable-businessman-in-a-classical-suit-picture-id496312478?k=6&m=496312478&s=612x612&w=0&h=wV0lxNsnG6XMW4uIKL89HQD3A9LNFKhalhpb05auVR0=" alt="Suits on sale!" /></a>
    </div>
    <div class="promo" id="promo2">
      <a href="cat_suits.html" ><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcStxa8Lo2sWRpgR2klGQiR_YeLtumUBaSdCWHQNw1ciOdiP1HBAEw" alt="Shoes on sale!" /></a>
    </div>
    <div class="promo" id="promo3">
      <a href="cat_suits.html" ><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSKKe0BOy0ulsoKUMo6DyHXBdoomNx_ZH7aCTsX-QS2Ilo0uPO5" alt="Shirts on sale!" /></a>
    </div>
    <div class="promo" id="promo4">
      <a href="cat_suits.html" ><img src="https://thumb1.shutterstock.com/display_pic_with_logo/2746450/512816923/stock-photo-brown-pants-512816923.jpg" alt="Pants on sale!" /></a>
    </div>
  </div>
  <div class="col span_1_of_6">
  </div>
 
  <!-- HTML CHANGES: Added button tags instead of div tags, remove IDs, added dead link(#) to Anchor tags to prevent leaving page when button clicked  -->
  
  <div class="section group">
    <div class="col span_1_of_6">
    </div>
    <div class="col span_1_of_6">
      <a href="#">
        <button class="promo_button" >
          Suits
        </button>
      </a>
    </div>
    <div class="col span_1_of_6">
      <a href="#">
        <button class="promo_button" >
          Shoes
        </button>
      </a>
    </div>
    <div class="col span_1_of_6">
      <a href="#">
        <button class="promo_button" >
          Shirts
        </button>
      <!-- </a> -->
    </div>
    <div class="col span_1_of_6">
      <a href="#">
        <button class="promo_button">
          Pants
        </button>
      </a>
    </div>
    <div class="col span_1_of_6">
    </div>
  </div>
</div>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题