Javascript, um Informationen an HTML zu übergeben

Question

Ich habe eine Hauptseite und es gibt Elemente auf der Seite. Wenn ich bei einem Artikel auf "Jetzt bestellen" klicke, wird eine HTML-Seite über einen Teil der Seite eingeblendet, um die Details des Objekts anzuzeigen. Ich habe Probleme, das angeklickte Objekt mit einem Objekt in einem Array von Objekten zu verknüpfen, das die Details für jedes Objekt enthält, so dass ich die Details auf der Seite anzeigen kann, die über das Objekt gleitet.

Hier ist die Haupt-Seite:

<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> 

Die Seite gleitet über in Ordnung, aber ich kann nicht das Bild zu bekommen scheinen zu ändern. Die HTML-Datei mit den Informationen, die auf dem Bildschirm angezeigt werden, ist in einem Artikel-Tag enthalten. Hier ist das Top-Snippet des HTML mit dem Bild, das ich scheinbar nicht ändern kann.

<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> 

Das ist mein JS soweit, das funktioniert nicht.

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

Wenn ich Sie richtig verstehe, wenn Sie den Auftrag Schaltfläche klicken, können Sie den Artikel von id in items durch das Lesen der data-id Eigenschaft auf den Bestellbutton auf die geklickt wurde, und dann auf die Eigenschaften von diesem Artikel finden Sie wie Also:

Um dies mit Ihrem spezifischen Szenario arbeiten zu können, müssen Sie einige Funktionen ändern, die Sie nicht in Ihre ursprüngliche Frage aufgenommen haben, aber ich habe den Link aus dem Link in den Kommentaren ausgegraben. Der Code würde wie folgt aussehen:

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

• -Code zu lang ist, in einem Stapel Schnipsel
• Stellen Sie sicher, drücken „Lauf mit JS“ zu setzen, wenn Sie die jsbin laden