0

我正在尝试使用 Javascript 的 getAttribute 来获取商品价格。我是个大菜鸟，所以我只使用了 getAttribute 并将<h2>类更改为商品价格。不过，这只获取了第一个项目的价格，我怎样才能让它获取所有的价格并将它们存储为一个数组以进行排序或其他什么？

这是我的一些 HTML：

<div class="col-sm-4">
  <div class="product-image-wrapper">
    <div class="single-products">
      <div class="productinfo text-center">
        <img src="images\site_images\bag3.jpg" alt="" height="249" />
        <h2 class="881.10">$881.10</h2>
        <h5>Authentic New Gucci ($1690) Micro-GG "Vernice" Crossbody w/Strap #309617, NWT</h5>
        <a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to Cart</a>
      </div>
      <div class="col-sm-4">
        <div class="product-image-wrapper">
          <div class="single-products">
            <div class="productinfo text-center">
              <img src="images\site_images\bag4.jpg" alt="" height="249" />
              <h2 class="569.05">$569.05</h2>
              <h5>AUTHENTIC NWT ($819) Gucci GG Large Brown Denim Tassell Tote #336660, w/Gft Rcpt</h5>
              <a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to Cart</a>
            </div>

            <div class="col-sm-4">
              <div class="product-image-wrapper">
                <div class="single-products">
                  <div class="productinfo text-center">
                    <img src="images\site_images\bag5.jpg" alt="" height="249" />
                    <h2 class="559.00">$559.00</h2>
                    <h5>Authentic Gucci GG Micro-Guccissima Leather Tote #309613 w/Gft Rcpt,NWT</h5>
                    <a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to Cart</a>
                  </div>

和

<button onclick="myFunction()">Try it</button>
<p id="demo"></p>

这是我用来获取商品价格的 Javascript 代码：

function myFunction() {
  var x = document.getElementsByTagName("H2")[0].getAttribute("class");
  document.getElementById("demo").innerHTML = x;
}

正如你所看到的，我是一个巨大的新手，所以如果可以的话，请尽量让你的答案不那么复杂。：） 谢谢！

4

2 回答 2

0

为什么首先将价格值存储为类属性？通过这样做，您违背了类属性的主要目的，即对具有共同点的元素进行分组。

我建议对包含价格的所有标签的 class 属性使用相同的值，例如：

...
<h2 class="price">$111.11</h2>
...
<h2 class="price">$222.22</h2>
...

然后，您可以在一次调用中获取属于同一类的所有元素，并对其进行迭代：

javascript: 
var items = getElementsByClassName('price')

jQuery:
var items = $('.price')

如果出于某种原因将值存储在某个属性中对您很重要，您可以使用自定义data-属性，例如：

<h2 class="price" data-value="111.11">$111.11</h2>

稍后可以访问：

javascript:
<element>.getAttribute('data-value')

jQuery: 
<element>.data('value');
于 2015-12-25T19:59:40.927 回答
0

将价格保存到数组中，然后用于.sort()对数组进行排序。请注意，该.sort()函数默认按字母顺序排序，因此您必须为整数编写自己的比较器函数。例如，按升序排序：

function sortNumber(a,b) {
    return a - b;
}

将所有价格保存到数组后，遍历数组并使用一元加号将它们转换为数字：

var items = document.getElementsByTagName("H2");
var prices = [];

for(var i = 0; i < items.length; i++){
    prices.push( +items[i].getAttribute("class"));
}

或者，您可以使用.parseInt().

在这里看一个例子：http: //codepen.io/anon/pen/VeKyMe

于 2015-12-25T19:44:00.500 回答