Javascript将信息传递给HTML

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

如果我理解正确的话，当你点击的顺序按钮，可以通过读取被点击，然后从这样的项目访问属性的命令按钮的data-id财产找到ID在items项目所以：

为了使你的特定场景能够正常工作，你将不得不修改你原来的问题中没有包含的一些功能，但是我从你在评论中提供的链接中找到了一些功能。该代码将如下所示：

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

• 代码太长把堆栈中的片段
• 确保按“用JS运行”当你加载jsbin