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输入这些值。任何帮助或方向将不胜感激。

BTW，在我尝试屠杀此代码之前，原始代码设置为显示警告：

 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;请避免使用链接。您不希望为用户提供链接功能，例如不在其中的open-in-new-window。使用按钮，如果您不希望它看起来像按钮，您可以使用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()。）

onclick help - 读取特定类的值

1 个答案: