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

我假设您将价格，图像和描述信息存储在服务器或计算机上的某个数据库中。如果是这样，那么功能非常简单：

从服务器获取所有产品时（例如下面的Haori夹克），请保存ID或您为每种产品使用的任何标识符，然后使用data-xxx属性将其放置在HTML标记中。例如：

<a href="#" class="shop-item"> 
  <img src="img/haori-jacket.jpg" alt="Haori Jacket" class="shop-item__img">
  <div class="quickview">
    <!-- random ID as example -->
    <span class="quickview__icon" data-id="560387">Quick View</span>
    <span class="quickview__info">Haori jacket<br><span class="quickview__info--price">$210.00</span></span>
  </div>
</a>

在“点击”功能中，通过jQuery使用AJAX调用获取商品信息（或其他方式），然后使用jQuery在.popup-window中更新该信息。

$('.quickview__icon').click(function (){
    // get the ID of the item
    let id = $(this).data('id');
    // Perform an AJAX call to get your information using the ID you
    // retrieved. I am assuming you've
    // obtained a JSON object with the properties 'title', 'src', 
    // 'description', and 'price'.
    let data = getDataFromServer(id);
    // Change popup shop item img source
    $('.popup-item .wrapper-item__img').attr('src', data.src);
    // Change title
    $('.popup-item .heading-secondary').text(data.title);
    // Change description
    $('.popup-item .product-info__text').text(data.description);
    // Change price
    $('.popup-item .product-info__price').text(data.price);
});

jQuery对进行DOM的更新非常有用，因为您可以很容易地通过CSS selectors选择要更改的元素，如上所示，然后使用许多实用的方法jQuery提供了更新所述元素的属性或内容的方法。

注意：我使用jQuery是因为您已经在JavaScript代码段中使用了它，所以我假设您在项目中使用了它。

Answer 2

使用jQuery的$().attr()或$().prop()获取元素的属性，例如id的{{1}}或{{1}的<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();
  }
});

Answer 3

如果您可以将此传递给打开弹出窗口的函数，则可以访问this.parentNode.parentNode.children[0];之类的图片，标题可以通过this.parentNode.children[1].innerHTML;获得，依此类推。

请注意，如果您使用getElementsByClassName而不是子级，则代码将更加安全。抱歉，我无法提供更完整的答案，但我现在没有时间，但这可能会帮助您前进。

根据元素更改img src和文本

3 个答案: