javascript - 根据元素更改img src和文本

Question

为了更好的理解，先给大家看一张图:

当我点击快速查看按钮时，会出现一个弹出窗口，我想让这个动态意味着如果我点击一个项目，img 应该根据点击的项目而改变。

然后是第二个功能，它基本上应该根据项目描述更改弹出窗口项目的“标题”名称、“价格”和“文本”(如果可能)。这是弹出窗口的图像:

第二张图片说明我点击了第一件商品，但如果我点击第二件商品(或任何其他商品)，名称、价格和描述应随图片一起更改。我想更改图像的功能可能没有那么复杂，但是当涉及到第二个功能时，我根本不知道如何实现它，我不想认为我必须在其中构建一个不同的弹出窗口我的每个元素的 html 结构。

<main>
    <section class="products-container container">
      <nav class="categories">
        <span class="categories__link" id="accesories">Accesories</span>
        <span class="categories__link">Bottoms</span>
        <span class="categories__link">Dresses + Jumpsuits</span>
        <span class="categories__link">Outerwear</span>
        <span class="categories__link">Tops</span>
        <span class="categories__link">— Sale</span>
      </nav>
      <div class="products">
        <a href="#" class="shop-item">
          <img src="img/haori-jacket.jpg" alt="Haori Jacket" class="shop-item__img">
          <div class="quickview">
            <span class="quickview__icon">Quick View</span>
            <span class="quickview__info">Haori jacket<br><span class="quickview__info--price">$210.00</span></span>
          </div>
        </a>
        <a href="#" class="shop-item">
          <img src="img/swing-dress.jpg" alt="Swing Dress" class="shop-item__img">
          <div class="quickview">
            <span class="quickview__icon">Quick View</span>
            <span class="quickview__info">Swing dress<br><span class="quickview__info--price">$218.00</span></span>
          </div>
        </a>
        <a href="#" class="shop-item">
          <img src="img/linen-top.jpg" alt="Linen Top" class="shop-item__img">
          <div class="quickview">
            <span class="quickview__icon">Quick View</span>
            <span class="quickview__info">Linen top<br><span class="quickview__info--price">$125.00</span></span>
          </div>
        </a>
        <a href="#" class="shop-item">
          <img src="img/lounge-jumpsuit.jpg" alt="Lounge Jumpsuit" class="shop-item__img">
          <div class="quickview">
            <span class="quickview__icon">Quick View</span>
            <span class="quickview__info">Lounge Jumpsuit<br><span class="quickview__info--price">$298.00</span></span>
          </div>
        </a>
        <a href="#" class="shop-item">
          <img src="img/lounge-tunic.jpg" alt="Lounge Tunic" class="shop-item__img">
          <div class="quickview">
            <span class="quickview__icon">Quick View</span>
            <span class="quickview__info">Lounge Tunic<br><span class="quickview__info--price">$258.00</span></span>
          </div>
        </a>
      </div>
    </section>

    <!-- Popup Shop Item -->

    <div class="popup-item">
      <div class="wrapper-item">
        <img src="img/haori-jacket.jpg" alt="Haori jacket" class="wrapper-item__img">
        <div class="product-info">
          <h2 class="heading-secondary">Haori jacket</h2>
          <span class="product-info__price">$210.00</span>
          <p class="product-info__text">Sed ornare tellus non lectus blandit faucibus. Curabitur convallis nibh ut libero lobortis ullamcorper. Aliquam ornare risus in orci iaculis egestas. Vivamus varius ipsum eu leo ...</p>
          <div class="detail-group">
            <p class="detail-group__span">Size:</p>
            <select class="detail-group__size">
              <option value="">Select Size</option>
              <option value="0">0</option>
              <option value="2">2</option>
              <option value="4">4</option>
              <option value="6">6</option>
              <option value="8">8</option>
            </select>
          </div>
          <div class="detail-group">
            <p class="detail-group__span">Quantity:</p>
            <input class="detail-group__quantity" max="9999" min="1" value="1" type="number">
          </div>
            <button type="button" class="btn btn--form btn--form--shop">Add to cart</button>
            <a href="" class="btn-view">View Full Item</a>
        </div>
      </div>
      <span class="popup__close-icon" id="closeIcon">&times;</span>
    </div>
  </main>

Javascript 打开弹出窗口

// Open popup shop item
  $('.quickview__icon').click(function (){
    $('footer').css('display', 'none');
    $('.popup-item').css({'opacity': '1', 'visibility': 'visible'});

    // Change popup shop item img source

  });

Answer 1

使用 jQuery 的 $().attr()或 $().prop()获取元素的属性，例如 id的 <span>或 src的 <img> .您可以将值存储在隐藏的 span 中稍后您可以使用 document.getElementById("id").innerHTML 提取它.

var numOfImages = 3;
var currentImg = null;
$('.quickview__icon').click(function(e){
   $('#popup').show();
   var imgid = "#"+$(this).attr('id').replace(/\s/g,'') + "img";
   var imgsrc = $(imgid).prop('src');
   var imgnumid = $(this).attr('id').replace(/\s/g,'') +"num";
   var imgnum = parseInt(document.getElementById(imgnumid).innerHTML, 10);
   currentImg = imgnum;
   if(imgnum==1){
    $('#previous').hide();
   } else {
     $('#previous').show();
   }
   if(imgnum==numOfImages){
     $('#next').hide();
   } else {
      $('#next').show();
   }
   var price = document.getElementById($(this).attr('id').replace(/\s/g,'')+"price").innerHTML;
   document.getElementById("clothingprice").innerHTML = price;
   $('#popupimg').prop('src', imgsrc);
   document.getElementById("clothingname").innerHTML = $(this).attr('id');
});
$('#closepopup').click(function(e){
	$('#popup').hide();
});
$('#next').click(function(e){
  if(currentImg==3){
  document.getElementsByClassName("quickview__icon")[0].click();
  } else {
  document.getElementsByClassName("quickview__icon")[currentImg].click();
  }
});
$('#previous').click(function(e){
	if(currentImg==1){
  document.getElementsByClassName("quickview__icon")[2].click();
  } else {
  document.getElementsByClassName("quickview__icon")[currentImg-2].click();
  }
});

.clothing{
  border: 1px solid black;
}
.quickview__icon{
  color: #ff0000;
  cursor: pointer;
}
.popup{
  width: 50%;
  height: 90%;
  position: fixed;
  right: 25%;
  z-index: 1000;
  background-color: grey;
  top: 5%;
  opacity: 75%;
}
.close{
  font-size: 2em;
  position: fixed;
  right: 26%;
}
.close:hover{
  color: red;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="clothing">
<img id="Haorijacketimg" src="data:image/jpeg;base64,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"width="50" height="50"/>
<br/>
<span class="quickview__icon" id="Haori jacket">
Quick View
</span>
<br/>
<span>
Haori jacket
</span>
<br/>
<span id="Haorijacketprice">
$210.00
</span>
<span id="Haorijacketnum" style="display: none;">1</span>
</div>
<br/>
<div class="clothing">
<img id="Linentopimg" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSHnKUQNqUcYm7fauoZSam3_c4gne4NemeUUyY2-RkvGWuOGR6O6g" width="50" height="50"/>
<br/>
<span class="quickview__icon" id="Linen top">Quick View</span>
<br/>
<span>Linen top</span>
<br/>
<span id="Linentopprice">
$170.00
</span>
<span id="Linentopnum" style="display: none;">2</span>
</div>
<div class="clothing">
<img id="T-shirtimg" src="data:image/jpeg;base64,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" width="50" height="50"/>
<br/>
<span class="quickview__icon" id="T-shirt">Quick View</span>
<br/>
<span>T-shirt</span>
<br/>
<span id="T-shirtprice">
$50.00
</span>
<span id="T-shirtnum" style="display: none;">3</span>
</div>
<div class="popup" style="display: none;" id="popup">
<span class="close" id="closepopup" title="Close">&times;</span>
<br/>
<img src="" id="popupimg" width="100" height= "100"/>
<br/>
<div style="width: 100%; position: relative">
<img id="previous" src="https://image.flaticon.com/icons/svg/60/60965.svg" height="50" width="50" style="position: absolute; left: 3px;"/>
<img id="next" src="https://image.flaticon.com/icons/svg/60/60758.svg" height="50" width="50" style="position: absolute; right: 3px;"/>
</div>
<div style="width: 100%; text-align: center;">
<span id="clothingname"></span>
<br/>
<span id="clothingprice"></span>
</div>
<br/>
</div>