html - Show different images onClick event (JavaScript)

Question

Welcome To Ask or Share your Answers For Others

html - Show different images onClick event (JavaScript)

asked Oct 6, 2021 in Technique[技术] by 深蓝 (71.8m points)

So, I don't have any working knowledge of JavaScript, but I am wondering why this does not work for me. I have 4 buttons, 4 different divs with different images, when one button is clicked I would like the images to change to the category which is displayed on the button.

i.e Button: "Windows" --Button is clicked--> Show images of windows

Button "Doors" --Button is clicked--> show images of Doors

JavaScript file is imported to HTML document:

<head>
    <script type="text/javascript" src="script.js"></script>
</head>

const showChoosenCategory = event => {
  const getId = event.id
  const links = document.querySelectorAll('.work-category button')
  for (i = 0; i < links.length; i++) {
    if (links[i].hasAttribute('class')) {
      links[i].classList.remove('active')
    }
  }

  event.classList.add('active')
  const getCategory = document.querySelector(`.category-${getId}`)
  const categories = document.querySelectorAll('div[class ^= "category-"]')
  for (i = 0; i < categories.length; i++) {
    if (categories[i].hasAttribute('class')) {
      categories[i].classList.remove('showCategory')
      categories[i].classList.add('hideCategory')
    }
  }

  getCategory.classList.remove('hideCategory')
  getCategory.classList.add('showCategory')
}

.hideCategory {
  display: none;
}

<div class="gallery" id="gallery">
  <div class="work-category">
    <button class="category active" id="windows">F?nster</button>
    <button class="category" id="doors">D?rr</button>
    <button class="category" id="furniture">M?bler</button>
    <button class="category" id="misc">?vrigt</button>
  </div>
  <div class="category-windows showCategory">
    <div class="imageslist">
      <img src="assets/img_window.jpg" class="gallery-image">
    </div>
  </div>
  <div class="category-doors hideCategory">
    <div class="imageslist">
      <img src="assets/img_door.jpg" class="gallery-image">
    </div>
  </div>
  <div class="category-furniture hideCategory">
    <div class="imageslist">
      <img src="assets/img_furniture.jpg" class="gallery-image">
    </div>
  </div>
  <div class="category-misc hideCategory">
    <div class="imageslist">
      <img src="assets/img_misc.jpg" class="gallery-image">
    </div>
  </div>
</div>

question from:https://stackoverflow.com/questions/66050288/show-different-images-onclick-event-javascript

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

82 views

1 Answer

深蓝 · Answer 1 · 2021-10-06T03:16:02+0000

This is a small solution based on the script you provided. I have modified/added some attributes in order to simplify the script. The logic is the following:

the button dictates which div is going to be display

var controls = document.querySelector('.work-category');
var gallery = document.querySelector('.gallery');

controls.addEventListener('click', displayCategory);


function displayCategory(ev) {
  var selectedControl = controls.querySelector('.active');
  var activeCategory = gallery.querySelector('.showCategory');
  // exiting early if the selected control
  // is the clicked button
  if (ev.target === selectedControl) { return; }

  var categoryId = ev.target.dataset.category;
  var category = gallery.querySelector('.category-' + categoryId);
  
  ev.target.classList.add('active');
  category.classList.add('showCategory');
  selectedControl.classList.remove('active');
  activeCategory.classList.remove('showCategory');
}

.active {
  background: skyblue;
}

.category-windows,
.category-doors,
.category-furniture,
.category-misc {
  display: none;
}

.showCategory {
  display: block;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
 <div class="gallery" id="gallery">
    <div class="work-category">
        <button class="category active" data-category="windows">F?nster</button>
        <button class="category" data-category="doors">D?rr</button>
        <button class="category" data-category="furniture">M?bler</button>
        <button class="category" data-category="misc">?vrigt</button>
    </div>
    <div class="category-windows showCategory">
        <div class="imageslist">
            <img src="assets/img_window.jpg" alt="window" class="gallery-image">
        </div>
    </div>
    <div class="category-doors">
        <div class="imageslist">
            <img src="assets/img_door.jpg" alt="door" class="gallery-image">
        </div>
    </div>
    <div class="category-furniture">
        <div class="imageslist">
            <img src="assets/img_furniture.jpg" alt="furniture" class="gallery-image">
        </div>
    </div>
    <div class="category-misc">
        <div class="imageslist">
            <img src="assets/img_misc.jpg" alt="misc" class="gallery-image">
        </div>
    </div>
</div>
</body>
</html>

Categories

html - Show different images onClick event (JavaScript)

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags