javascript - onclick 帮助 - 读取特定类的值，第 2 部分

Question

我正致力于将 javascript 购物车 simplecart-js 集成到 Jquery LightBox、Yoxview 中。 Yoxview 有一个选项，可以在弹出的标题 Pane 中添加按钮链接，用于各种选项、下载、购物车等。我的购物车按钮的相关代码是:

var yoxviewCartButton = $("<a>", {
    title: "Add to cart",
});

$('.simpleCart_shelfItem').each(function () {
    var name = $(this).children('span')[0].firstChild.data;
    var price = $(this).find('span>span').text().replace('$', '');
    var thumbs = $(this).find('span>span>span').text().replace('$', '');
    var button = $('<button/>', {
        type: 'button',
        'class': 'shopping_button'
    });

    button.append($('<img/>', {
        src: 'yoxview/images/yoxview_cart_icon.png',
        title: 'Add to   cart',
        width: 18,
        height: 18
    }));
    button.click(function () {
        simpleCart.add('name=' + name, 'price=' + price, 'quantity=1', 'thumb=' + thumbs);
    });
    yoxviewCartButton.append(button);
});

$(".yoxview").yoxview({
    infoButtons: {
        download: yoxviewDownloadButton,
        cart: yoxviewCartButton
    },
    onSelect: function (i, image) {
        $.yoxview.infoButtons.download.attr("href", image.media.src);
        $.yoxview.infoButtons.cart.data("yoxview_cart", image.media.src);
        $.yoxview.infoButtons.cart.click(function () {
            $("#cart").show();
            $.yoxview.close();
        });
    }
});

html 是:

<a class="item yoxview simpleCart_shelfItem" href="pics/pic0.png" title="Title 1">
    <img class="content" src="pics/pic0.png" title="Title 1"/>
    <span class="caption item_name">
        Title 1
        <span class="item_price">$14.99</span>
        <span class="item_thumb">pic5.png</span>
    </span>
</a> 

我意识到我需要清理 html 并摆脱所有嵌套跨度并清理代码以使用 text() ，正如 bobince 在我上一个问题中所建议的那样。我的下一个任务!

我让它运行良好，我可以show() 不可见的购物车 div 并在我单击购物车按钮时关闭灯箱窗口，购物车可以正常工作。

我做不到的2个问题是

1. 我的代码无法读取拇指，但所有其他数据都运行良好

2. 更重要的是，灯箱中显示的购物车按钮数量与“simpleCart_shelfItem”图像相同。一个很棒，但是 6 个看起来有点过头了(或者急于出售？哈哈)。如果有人给我一些指导，让代码只显示相应“simpleCart_shelfItem”的一个按钮，而不是全部，我将不胜感激!

我更新了我的代码，并且我使代码更接近工作。我已经修复了多个购物车按钮，当单击时，购物车数据按预期输入到购物车中，除了类为“simpleCart_shelfItem”的所有项目都加载到购物车中，而不仅仅是一个我点击购物车按钮。这是我更新的代码:

var yoxviewCartButton = $("<a>", {
        title: "Add to cart"       
    });
    yoxviewCartButton.append($("<img>", {
        src: "yoxview/images/yoxview_cart_icon.png",
        alt: "Add to cart",
        css: { width: 18, height: 18 }
    }));
    $(".yoxview").yoxview({ 
        infoButtons: {
            download: yoxviewDownloadButton,
            cart: yoxviewCartButton
        },
        onSelect: function(i, image)
        {
            $.yoxview.infoButtons.download.attr("href", image.media.src);
            $.yoxview.infoButtons.cart.data("yoxview_cart", image.media.src);
              $.yoxview.infoButtons.cart.click(function () {
              $('.simpleCart_shelfItem').each(function () {
var name = $(this).children('span')[0].firstChild.data;
var price = $(this).find('span>span').text().replace('$', '');
var thumbs = $(this).find('span>span>span').text().replace('$', '');
simpleCart.add('name=' + name, 'price=' + price, 'quantity=1', 'thumb=' + thumbs);
});               
    $("#cart").show();
     $.yoxview.close();
    });
        }
    });

这是测试页面的链接:

http://macosxsupport.com/yoxview_cart/

Answer 1

拇指选择器:

span>span>span

有零个匹配项，所以这行不通。

按钮代码在each 函数中。将所有 button 引用移动到 bool 值:

if($('.simpleCart_shelfItem').length)
  {
  var button = $('<button/>', {
    type: 'button',
    'class': 'shopping_button'
    });
  /*...*/
  }