onclick 帮助 - 读取特定类的值

Question

我希望我的描述不会太混乱！我正在尝试将一个 JavaScript 购物车 simplecart-js 集成到一个 Jquery LightBox Yoxview 中。 Yoxview有一个选项，可以在弹出的标题窗格中添加按钮链接，用于各种选项，下载，购物车等。购物车按钮的相关代码是：

var yoxviewCartButton = $("<a>", {
    title: "Add to cart",
            href: "javascript:;",
    onclick:"simpleCart.add('name=Awesome', 'price=14.95','quantity=1');"
        });
        yoxviewCartButton.append($("<img>", {
            src: "yoxview/images/yoxview_cart_icon.png",
            alt: "Add to cart",
            css: { width: 18, height: 18 },

        }));

shopingcart-js 到按钮的具体集成是：

href: "javascript:;",
onclick:"simpleCart.add('name=Awesome', 'price=14.95','quantity=1');

我使用的html结构是：

<a class="item yoxview simpleCart_shelfItem" href="pics/pic0.png" title="Test1">
<img class="content" src="pics/pic0.png" title="Test1"/>
<span class="caption item_name">Pic 0 
<span class="item_price">$14.99</span></span></a>

onclick 事件有效，但显然为每个图像输入相同的信息，所以我试图让每个“simpleCart_shelfItem”的“item_name”和“item_price”输入到 onclick 的 name= 和 price= 字段事件。我不确定如何让 jquery 输入这些值。任何帮助或方向将不胜感激。

顺便说一句，在我尝试处理这段代码之前，原始代码被设置为显示警报：

 var yoxviewCartButton = $("<a>", {
            title: "Add to cart",
            href: "#",
            click: function(e){
                e.preventDefault();
                alert("The image \"" + $(this).data("yoxview_cart") + "\" can be added to cart through AJAX.");
            }
        });
        yoxviewCartButton.append($("<img>", {
            src: "../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);
            }
        });
    });

Answer 1

不要将onclick 设置为字符串的属性。它很丑陋，在 IE 中不起作用。使用 jQuery 自己的事件处理方法，例如 click()。

此外，请勿将链接用于非链接的内容（尤其是javascript: URL；避免使用）。您不想为用户链接提供像在新窗口中打开这样根本不存在的功能。使用一个按钮，如果你不希望它看起来像一个按钮，你可以使用 CSS 来移除背景、边框等。

$('.simpleCart_shelfItem').each(function() {
    var name= $(this).children('span')[0].firstChild.data;
    var price= $(this).find('span>span').text().replace('$', '');
    var button= $('<button/>', {type: 'button', 'class': 'looksUnlikeAButton'});
    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');
    });
    $('#whereeverYouWantToPutIt').append(button);
});

（这使用纯 DOM firstChild.data 来挑选外部 <span> 中的初始文本。通常你会使用 text()，但这也会返回嵌套跨度中的价格。如果它们是两个独立的跨度，您可以在每个跨度上使用text()。）