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