主页 / 问题 / 1514485
Accepted
powerg
Asked:2023-04-20 01:01:30 +0000 UTC2023-04-20 01:01:30 +0000 UTC

如何在单击按钮时更改图像？

  • 772

当您单击一种颜色时，有必要更改图片。但问题是页面上可能有很多这样的块，并且所有内容都只适用于第一个。你能告诉我如何使每个块都有自己的图片吗？

document.body.addEventListener('click', e => {
  if (!e.target.matches('button')) return
  document.querySelector('.pic img').src = e.target.dataset.src
  
  document.querySelectorAll('button').forEach(btn => btn.classList.remove('active'))
  e.target.classList.add('active')
})
.pic {
  display: inline-block;
}

button {
  padding: 1em;
}

button.active {
  background: tomato;
}
<div class="content">
  <div class="pic">
    <img src="https://image.coolblue.nl/422x390/products/1216241">
  </div>

  <button data-src="https://image.coolblue.nl/422x390/products/1216241" class="active">
    Blue
  </button>

  <button data-src="https://image.coolblue.nl/422x390/products/1214824">
    Black
  </button>
  <div>

    <div class="content">
      <div class="pic">
        <img src="https://image.coolblue.nl/422x390/products/1216241">
      </div>

      <button data-src="https://image.coolblue.nl/422x390/products/1216241" class="active">
        Blue
      </button>

      <button data-src="https://image.coolblue.nl/422x390/products/1214824">
        Black
      </button>
      <div>

javascript

2 个回答

  1. 副手 2 个选项。

    document第一种是不在我们的父级中，而是在我们的父级中查找图片target。

    e.target.parentElement.querySelector('.pic img').src = e.target.dataset.src

    第二种，在我看来，更通用，是将.content ID产品（类型id="item-1"）添加到块中，添加到按钮中data-itemid，其中将包含ID其图像需要更改的产品。在这种情况下，更改图像将像这样完成：

    let pic = document.querySelector('#' + e.target.dataset.itemid + ' .pic img')
pic.src = e.target.dataset.src

    第二种选择更通用，因为。与 HTML 结构没有那么紧密的联系。因此，下面的工作示例与他有关。

    附言。不要忘记正确关闭HTML块。在您的示例中，在 y 块的末尾，.content而不是结束标记</div>，开始标记是 -<div>

    document.body.addEventListener('click', e => {
  if (!e.target.matches('button')) return

  let pic = document.querySelector('#' + e.target.dataset.itemid + ' .pic img')
  pic.src = e.target.dataset.src


  document.querySelectorAll('#' + e.target.dataset.itemid + ' button').forEach(btn => btn.classList.remove('active'))
  e.target.classList.add('active')
})
    .pic {
  display: inline-block;
}

button {
  padding: 1em;
}

button.active {
  background: tomato;
}
    <div class="content" id="item-1">
  <div class="pic">
    <img src="https://image.coolblue.nl/422x390/products/1216241">
  </div>

  <button data-src="https://image.coolblue.nl/422x390/products/1216241" class="active" data-itemid="item-1">
    Blue
  </button>

  <button data-src="https://image.coolblue.nl/422x390/products/1214824" data-itemid="item-1">
    Black
  </button>
</div>

<div class="content" id="item-2">
  <div class="pic">
    <img src="https://image.coolblue.nl/422x390/products/1216241">
  </div>

  <button data-src="https://image.coolblue.nl/422x390/products/1216241" class="active" data-itemid="item-2">
        Blue
      </button>

  <button data-src="https://image.coolblue.nl/422x390/products/1214824" data-itemid="item-2">
        Black
      </button>
</div>

    • 1
  2. Best Answer

    我会建议这个选项。在其中，您监听任何点击（理想情况下，您需要在包装这些块的容器上挂一个监听器），检查被点击的元素是一个按钮，并以 、图像和活动按钮document的形式获取我们的包装器。.content我们从活动按钮中删除类，将其提供给按下的按钮并从按钮属性中active设置- 。image srcdata-src

    document.addEventListener("click", ({target}) =>
{
  if (target.tagName !== "BUTTON")
  {
    return;
  }
  
  const wrapper = target.closest(".content");
  if (wrapper === null)
  {
    return;
  }
  
  const image = wrapper.querySelector(".pic img");
  const activeButton = wrapper.querySelector("button.active");
  if (image === null || activeButton === null)
  {
    return;
  }
  
  activeButton.classList.remove("active");
  
  const button = target;
  button.classList.add("active");
  
  image.src = button.dataset.src; 
});
    .pic {
  display: inline-block;
}

button {
  padding: 1em;
}

button.active {
  background: tomato;
}
    <div class="content">
  <div class="pic">
    <img src="https://image.coolblue.nl/422x390/products/1216241">
  </div>

  <button data-src="https://image.coolblue.nl/422x390/products/1216241" class="active">
    Blue
  </button>

  <button data-src="https://image.coolblue.nl/422x390/products/1214824">
    Black
  </button>
</div>

<div class="content">
  <div class="pic">
    <img src="https://image.coolblue.nl/422x390/products/1216241">
  </div>

  <button data-src="https://image.coolblue.nl/422x390/products/1216241" class="active">
        Blue
  </button>

  <button data-src="https://image.coolblue.nl/422x390/products/1214824">
        Black
  </button>
</div>

    • 1

相关问题