onclick help - чтение значения определенного класса

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 работы событий, но вводит ту же информацию для каждого изображения, очевидно, поэтому я стараюсь чтобы получить «item_name» и «item_price» для каждого «simpleCart_shelfItem» для ввода в поле name = и price = события onclick. Я не уверен, как получить 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:, избегайте). Вы не хотите давать доступную ссылку на пользователя, как открытое в новом окне, которого просто нет. Используйте кнопку, и если вы не хотите, чтобы это выглядело как кнопка, вы можете использовать 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() на каждом из них.)