Working Demo

Question

我有一个主页面，页面上有项目。当我单击某个项目上的“立即订购”时，HTML页面会滑过页面的一部分以显示项目的详细信息。我无法将单击的项目链接到包含每个项目详细信息的对象数组中的项目，因此我可以在滑过的页面上显示详细信息。

这是主页：

<div class="col-md-4 col-sm-6">
    <div class="shop-item">
        <div class="shop-thumbnail">
            <img src="img/originalImage.jpg" alt="">
        </div>
        <div class="shop-item-footer">
            <div class="shop-item-details">
                <h3 class="shop-item-title">Original Title</h3>
                <span class="shop-item-price">
                    $50.00
                </span>
            </div>
            <div class="shop-item-order-btn">
                <a href="ajax/slidingpage.html" class="btn btn-ghost btn-sm btn-pill btn-primary waves-effect waves-light ajax-load-link" data-id="003" onclick="changeImage()">Order Now</a>
            </div>
        </div>
    </div>
</div>

页面滑动得很好，但我似乎无法改变图像。具有滑出到屏幕上的信息的html文件都包含在文章标签中。这是HTML的顶级片段，其中的图像似乎无法改变。

<article class="order-details">
    <div class="order-totals">
       <div class="product-image">
            <!-- ID for image  -->
            <img id="pageOrder" src="../img/Image1.jpg" alt="">
        </div>
    </div>
</article>

到目前为止，这是我的JS无效。

var items = [{ name: 'Black', cost: '$10.00', id: '001', src: '../img/Black.jpg' }, { name: 'Something', cost: '$10.00', id: '002', src: '../img/image2.jpg' },

function changeImage() {
  for (var i = 0; i >= items.count; i++) {
    if (i = items.count) {
        document.getElementById('pageOrder').src = items.src;
    }
  }
};

Answer 1

如果我理解正确，当您点击订单按钮时，您可以通过阅读点击的订单按钮上的items属性，在data-id中找到ID项，然后访问属性从那个项目如下：

要使用此特定方案，您必须修改原始问题中未包含的某些功能，但我从您在评论中提供的链接中挖掘出来。代码如下所示：

var items = [{
  name: 'Black',
  cost: '50.00',
  id: '001',
  src: 'img/Black2.jpg'
}, {
  name: 'Red',
  cost: '50.00',
  id: '002',
  src: 'img/BloodRed2.jpg'
}, {
  name: 'Desert Fox',
  cost: '50.00',
  id: '003',
  src: 'img/DesertFox.jpg'
}];

// Single Post via Ajax
//------------------------------------------------------------------------------
var ajaxLoadLink = $('.ajax-load-link'),
    orderBackdrop = $('.order-content-backdrop'),
    orderContainer = $('.order-content-wrap'),
    orderContentWrap = $('.order-content-wrap .inner'),
    orderContent = $('.order-content-wrap .inner .order-content'),
    closeBtn = $('.order-content-wrap .close-btn'),
    orderPreloader = $('.order-content-wrap .preloader');

// Open Order
function openOrder(itemDetails) {
  $('body').addClass('order-content-open');
  orderBackdrop.addClass('active');
  orderContainer.addClass('open');
  orderPreloader.addClass('active');
  orderContentWrap.addClass("loaded");
  setTimeout(function() {
    orderPreloader.removeClass('active');
    // insert data from itemDetails into their respective places on the form
    $(".order-content-wrap .order-details .product-image img").attr("src", itemDetails.src);
    $(".order-content-wrap .order-details .product-image img").attr("alt", itemDetails.name);
    $(".order-content-wrap .product-title").text(itemDetails.name);
    $(".order-content-wrap .price i").text(itemDetails.cost);
    $(".order-content-wrap .total-cost i").text(itemDetails.cost);
  }, 900);
}

// Close Order
function closeOrder() {
  $('body').removeClass('order-content-open');
  orderBackdrop.removeClass('active');
  orderContainer.removeClass('open');
  orderContentWrap.removeClass('loaded');
}

ajaxLoadLink.on('click', function(e) {
  var itemDetails = items.find(item => item.id === $(this).attr('data-id'));

  openOrder(itemDetails);

  e.preventDefault();
});

Working Demo

代码太长，无法放入堆栈代码
确保在加载jsbin

Javascript将信息传递给HTML

1 个答案:

Working Demo