HTMLに情報を渡すJavascript

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プロパティを読み取ることによって、itemsの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
をロードするとき、「JSとファイル名を指定して実行」を押してくださいスタックスニペット
• に置くには長すぎます