onclick 帮助 - 读取特定类的值

Posted 2023-03-14

【中文标题】onclick 帮助 - 读取特定类的值

【英文标题】：onclick help - reading the value of a specific class

【发布时间】：2010-10-28 17:32:24

【问题描述】：

我希望我的描述不会太混乱！我正在尝试将一个 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);
            
        );
    );

【问题讨论】：

Yoxview 要求您传入 href 和 onclick 的字符串？大概是evaled 以后吧？糟糕。

我不确定它是否需要，我可以将购物车集成到图像标题中，但弹出窗口中的按钮更好一些。按钮的原始代码是：href: "#", click: function(e) e.preventDefault(); alert("图片\"" + $(this).data("yoxview_cart") + "\" 可以通过AJAX添加到购物车。");

【参考方案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()。）

【讨论】：

两个独立的跨度是一个更好的主意。我必须承认我不知道应该在哪里插入与 yoxviewCartButton 变量相关的代码。当我尝试实现它时，我不断收到错误或按钮消失。