无法获得span属性的值

时间:2017-04-23 19:02:13

标签: javascript jquery html css

我想在div中获取span属性的值。该div是LI属性的一部分。 li属性是使用javascript创建的(对于完整代码,在下面)。这是我的html:

<ul name="products">
<li class="product" name="product2">
<input type="hidden" name="p2" value="Boter_250g/3/9.00">
<div class="product-image"></div>
<div class="product-details">
<a style="color: black;">Boter 250g</a>
<span class="price">€ 9.00</span>
<div class="quantity">
</div>
</div>
</li>
</ul>

我尝试过的事情

        productTotPrice = Number($(this).find('.price').text().replace('€', ''));

Number($(this).find('.product-details').text().replace('€', ''))

始终给出&#34; 0&#34;

js:

function addProduct() {
        var product = products[type];
        var productname = product.replace(/_/g, " ");

        var productAdded = $('<li class="product" name="product' + i + '">' +
            '<input type="hidden" name="p' + i + '"value="' + product + "/" + qty + "/" + price + '" />'    +
            '<div class="product-image">' +
            '<a href="image">' +
            '<img src="images/' + product + '.JPG" alt="placeholder"></a>' +
            '</div>' +
            '<div class="product-details">' +
            '<a style="color: black;">' + productname + '</a>' +
            '<span class="price">€ ' + price + '</span><br>' +
            '<div class="quantity">' +
            '<label>Aantal: ' + qty + '</label> <div class="actions">' +
            ' <a href="#0" class="delete-item" >Delete</a></div></div></div></li>');

        cartList.prepend(productAdded);

    }

4 个答案:

答案 0 :(得分:2)

  $('li.product[name="product'+i+'"] .product-details span.price').html().replace('$', '')

小提琴 https://jsfiddle.net/k3ca1L9b/

更新:    根据此on_click元素获取span值

$('li.product').click(function(){ alert($(this).find('.product-details span.price').html().replace('€', ''))})

https://jsfiddle.net/k3ca1L9b/1/

更新:    使用删除功能

 <a href="#0" class="delete-item" data-i = ' + i + '>
 $('.delete-item').click(function(){
 var i = $(this).data('i');
  var price = $('li.product[name="product'+i+'"] .product-details span.price').html().replace('$', '');
 })

答案 1 :(得分:1)

我添加了一个小提琴。请检查它是否适合您

 $('body').on('click', '.delete', function(e) {
   e.preventDefault();
   var text = $(this).closest('li.product').find('span.price').text()
   console.log(text.replace('€', ''))
 })

https://jsfiddle.net/g6o63eak/

答案 2 :(得分:0)

由于您使用的是jquery,为什么不使用:

#grad:hover {
    background: red; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(red, yellow); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(red, yellow); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(red, yellow); /* For Firefox 3.6 to 15 */
    background: linear-gradient(red, yellow);
}

答案 3 :(得分:-1)

这里有一些无效的假设。

  • li不是属性,它是HTML元素。
  • 您可以使用$(".price").text();