aide onclick - lire la valeur d'une classe spécifique

Question

J'espère que ma description ne sera pas trop confuse! J'essaie d'intégrer un panier javascript, simplecart-js, dans un JQuery LightBox, Yoxview. Yoxview a une option d'ajouter des liens bouton dans le volet de titre pop-up pour différentes options, téléchargement, panier, etc. Le code correspondant pour le bouton de panier est:

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 }, 

     })); 

l'intégration spécifique pour shopingcart-js dans la bouton est:

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

la structure html J'utilise est:

<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> 

les travaux d'événements onclick mais entrées les mêmes informations pour chaque image, évidemment, je suis donc essayer ing pour obtenir les "item_name" et "item_price" pour chaque "simpleCart_shelfItem" à entrer dans le champ name = et price = de l'événement onclick. Je ne sais pas comment obtenir jquery pour entrer ces valeurs. Toute aide ou direction serait grandement appréciée.

BTW, avant d'essayer le dépeçage de ce code, le code original a été configuré pour afficher une alerte:

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

Ne pas définir onclick comme un attribut d'une chaîne. C'est moche et ne fonctionnera pas dans IE. Utilisez les méthodes de gestion des événements propres à jQuery telles que click().

De même, n'utilisez pas de lien pour quelque chose qui n'est pas un lien (en particulier avec une URL javascript:, à éviter). Vous ne voulez pas donner à l'utilisateur des affordances de lien comme open-in-new-window qui ne sont tout simplement pas présents. Utilisez un bouton, et si vous ne voulez pas ressembler à un bouton, vous pouvez utiliser les CSS pour supprimer fond, bordures, etc.

$('.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); 
}); 

(celui-ci utilise DOM plaine firstChild.data pour enlever le texte initial dans la partie extérieure Normalement, vous utiliseriez text(), mais cela retournerait le prix dans l'intervalle imbriqué, ce qui serait plus facile s'il s'agissait de deux intervalles séparés, vous pourriez simplement text() sur chacun d'eux.)