javascript - 单击按钮打开隐藏的位置图仅适用于第一个

Question

我有这张卡，我需要复制粘贴很多时间，但是如果我复制粘贴它，则应该切换隐藏位置图的位置按钮仅适用于第一张卡，不适用于其余卡。我希望所有卡片在单击它们各自的位置图标时独立打开和隐藏位置图。

var res_location_btn = document.querySelector('.res-location-ico');
var res_location_con = document.querySelector('.res-card-location-con');

res_location_btn.addEventListener('click', show_res_location_con);

function show_res_location_con() {
  res_location_con.classList.toggle('show-res-card-location-con');
}

.res-card-outer {
  background-color: #fdfdfd;
  padding: 10px 10px 10px 10px;
  margin: 10px 0px 10px 0px;
}

.res-card-top-imginfo-box {
  display: flex;
}

.res-loc-shre-con {
  display: flex;
  padding: 4px 5px 5px 5px;
}

.res-location-ico {
  width: 17px;
  height: 17px;
  cursor: pointer;
  padding: 0px 7px 0px 0px;
}

.res-location-text {
	font-size: 14px;
	color: #8d8d8d;
	padding: 2px 5px 0px 5px;
}

.res-card-location-con {
  height: 0px;
  overflow: hidden;
}

.show-res-card-location-con {
  height: 250px;
}

.res-card-location-map {
  width: 100%;
  height: 100%;
  border: 0px;
}

<div class='res-card-outer'>
        <div class='res-card-top-imginfo-box'>
            <div class='res-loc-shre-con'>
              <img class='res-location-ico' src='https://ibnul.neocities.org/_temporary/address-location-icon.svg' alt=''>
              <p class='res-location-text'>2948 Resoif Voufo</p>
            </div>
        </div>
        <div class='res-card-location-con'>
          <iframe class='res-card-location-map' src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d31678.348374963647!2d-74.01457909623672!3d40.71440061428468!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew%20York%2C%20NY%2C%20USA!5e0!3m2!1sen!2sbd!4v1576717239432!5m2!1sen!2sbd" frameborder="0" allowfullscreen=""></iframe>
        </div>
      </div>

      <div class='res-card-outer'>
        <div class='res-card-top-imginfo-box'>
            <div class='res-loc-shre-con'>
              <img class='res-location-ico' src='https://ibnul.neocities.org/_temporary/address-location-icon.svg' alt=''>
              <p class='res-location-text'>2948 Resoif Voufo</p>
            </div>
        </div>
        <div class='res-card-location-con'>
          <iframe class='res-card-location-map' src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d31678.348374963647!2d-74.01457909623672!3d40.71440061428468!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew%20York%2C%20NY%2C%20USA!5e0!3m2!1sen!2sbd!4v1576717239432!5m2!1sen!2sbd" frameborder="0" allowfullscreen=""></iframe>
        </div>
      </div>

请用纯javascript显示。谢谢。

Answer 1

I want all the cards to open and hide the location map independently

然后你必须处理每张卡独立 .试试下面的代码片段，看看这是否是你想要的，也许代码在没有解释的情况下说明了它的作用(我也把评论放在里面)。我只更改了 javascript 部分，没有涉及 html/css。

// **querySelectorAll** instead of querySelector
// get all elements whose class of res.location-ico
var res_location_btns = document.querySelectorAll('.res-location-ico');

// add an event listener for EACH BUTTON
res_location_btns.forEach(btn => {
  btn.addEventListener('click', show_res_location_con);
});

function show_res_location_con(e) { 
  // traverse the parents and find the closest element whose class of res-card-outer
  var card = e.target.closest('.res-card-outer');
  
  // find the next child element whose the class of res-card-location-con
  var res_location_con = card.querySelector('.res-card-location-con');
  
  // toggle class, and remember, this is INDEPENDENT FOR EACH BUTTON
  res_location_con.classList.toggle('show-res-card-location-con');
}

.res-card-outer {
  background-color: #fdfdfd;
  padding: 10px 10px 10px 10px;
  margin: 10px 0px 10px 0px;
}

.res-card-top-imginfo-box {
  display: flex;
}

.res-loc-shre-con {
  display: flex;
  padding: 4px 5px 5px 5px;
}

.res-location-ico {
  width: 17px;
  height: 17px;
  cursor: pointer;
  padding: 0px 7px 0px 0px;
}

.res-location-text {
  font-size: 14px;
  color: #8d8d8d;
  padding: 2px 5px 0px 5px;
}

.res-card-location-con {
  height: 0px;
  overflow: hidden;
}

.show-res-card-location-con {
  height: 250px;
}

.res-card-location-map {
  width: 100%;
  height: 100%;
  border: 0px;
}

<div class='res-card-outer'>
  <div class='res-card-top-imginfo-box'>
      <div class='res-loc-shre-con'>
        <img class='res-location-ico' src='https://ibnul.neocities.org/_temporary/address-location-icon.svg' alt=''>
        <p class='res-location-text'>2948 Resoif Voufo</p>
      </div>
  </div>
  <div class='res-card-location-con'>
    <iframe class='res-card-location-map' src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d31678.348374963647!2d-74.01457909623672!3d40.71440061428468!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew%20York%2C%20NY%2C%20USA!5e0!3m2!1sen!2sbd!4v1576717239432!5m2!1sen!2sbd" frameborder="0" allowfullscreen=""></iframe>
  </div>
</div>

<div class='res-card-outer'>
  <div class='res-card-top-imginfo-box'>
      <div class='res-loc-shre-con'>
        <img class='res-location-ico' src='https://ibnul.neocities.org/_temporary/address-location-icon.svg' alt=''>
        <p class='res-location-text'>2948 Resoif Voufo</p>
      </div>
  </div>
  <div class='res-card-location-con'>
    <iframe class='res-card-location-map' src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d31678.348374963647!2d-74.01457909623672!3d40.71440061428468!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew%20York%2C%20NY%2C%20USA!5e0!3m2!1sen!2sbd!4v1576717239432!5m2!1sen!2sbd" frameborder="0" allowfullscreen=""></iframe>
  </div>
</div>