Javascript将信息传递到HTML

我有一个主页，页面上有一些项目。当我在一个项目上单击“立即订购”时，一个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>

---

如果我理解正确，当您单击订单按钮时，您可以通过读取单击的订单按钮上的

数据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();
});

• 代码太长，无法放入堆栈片段
• 加载jsbin时，请确保按“RunwithJS”

---

物品是什么样子的。看起来好像您正试图将其视为一个数组，它将是

.length

而不是

.count

。if正在执行赋值而不是比较（

x==y

），并且如果项是数组，

items.src

没有意义。编辑：和

i>=items。i从0开始的count

永远不会是真的。我创建了一个数组，其中包含与图像一起传递所需信息的键。我忘了在代码中添加数组，但我对这个问题已经厌倦了。var items=[{name:'Black'，cost:'$10.00'，id:'001'，src:'../img/Black.jpg'}，{name:'Something'，cost:'$10.00'，id:'002'，src:'../img/image2.jpg'}，@Taplar for循环也从0开始，然后检查

i>=length

，如果长度不为0，它将永远不会执行，在这种情况下，它将是一个无限循环。@mhodges实际上这将是一个无限循环，；）@TomG103那么您想做什么？您是否试图获取数组中的最后一个元素，并使用该元素c为图像？幻灯片上的页面完全没有该代码。上面发布的div和article段是分开的，因为它们位于不同的html文件中。@TomG103您必须发布代码，以实现“滑入”和数据填充。.订单总计{显示：表格；宽度：100%；填充底部：10px；.product image，.order totals detail{显示：表格单元格；垂直对齐：顶部；}。产品图像{宽度：325px；填充右侧：25px；>img{宽度：100%；}。产品标题{页边距底部：地板（$3行高度计算）；}。订单数量{页边距底部：底部（$line height computed/4）；>*{显示：内联块；垂直对齐：中间；页边距右侧：6px；}跨距{字体大小：$font size lead；}这似乎是CSS中的运动，但由于这是一个模板，谁知道lol。我必须参加一个公司的活动，所以今晚晚些时候我会回来看看周围发生了什么。我将在我即将关闭的网站的后端共享一个我一直在慢慢制作的链接。当你向下滚动时，你会看到每个项目的彩色图像。点击“或”点击图片下方的“立即删除”按钮，您将看到我正在尝试执行的操作。再次感谢所有人的帮助。如果我们不能很快解决此问题，我将为每个文件创建html文件，并在以后进行修复。

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

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();
});