Question

这是我的问题https://jsfiddle.net/xejcxm4c/ 实际上我想通过使用class属性而不是ID来使用div中的data-price属性。

HTML：

<aside>
    <h2>Warenkorb (X Artikel)</h2>
    <hr id="divider"/>

    <!-- Product 1 -->
  <div class="product1">
    <div class="article">
        <button type="button" class="button-design buttonminus">-</button>
        <input type="text" class="quantity-design quantity" id="quantity1" value="0">
        <button type="button" class="button-design buttonplus">+</button>
    </div>

    <div class="description product">
        <span>Gebratene Maultaschen</span>
        <span>Besonder Wünsche</span>
    </div>
    <div id="total-price" class="product" data-price="7.82">7.82 €</div><br/>
  </div>


    <!-- Product 2 -->
    <div class="product2">
      <div class="article">
          <button type="button" class="button-design buttonminus">-</button>
          <input type="text" class="quantity-design quantity" id="quantity2" value="0">
          <button type="button" class="button-design buttonplus">+</button>
      </div>
      <div class="description product">
          <span>Pastete</span>
          <span>Besonder Wünsche</span>
      </div>
      <div id="total-price2" class="product" data-price="10.8">€</div>
      <hr id="divider2"/>
      <div id="totalprice">
          <span>Summe</span>
          <span>18.60€</span>
      </div>
    </div>

    <button id="checkout" type="button" onclick="">JETZ KAUFEN</button>
</aside>

Jquery的：

$(document).ready(function() {

    $(".buttonplus").click(function() {
        var inputElement = $(this).parent().find("input");
        var total = inputElement.val();
        inputElement.val(++total);

        /*var event = new Event('change');
        inputElement.get(0).dispatchEvent(event);*/

    });
    $(".buttonminus").click(function() {
        var total = $(this).parent().find("input").val();
        $(this).parent().find("input").val(total -1 < 0 ? 0 : --total); // Shorter version of if statment

        console.log($(this).val());
        /*var newTotal = 0;
         if (total > 0) { newTotal = --total };
         $('#quantity2').val(newTotal);
         */
    });


    $("input").on("change paste keyup", function(){
     console.log($(this).parent().siblings("#total-price2").attr('data-price'));
      console.log($(this).val());


      var nitem = $(this).val(),
          pitem = $(this).parent().siblings(".product").attr('data-price'),
          result = parseFloat (nitem) * parseFloat(pitem);
      console.log(result);
      })
});

正如你在console.log上看到的那样，我正在使用它正常工作的id但在我的var上我试图使用该类并且它不起作用。

有什么想法？

Answer 1

您可以使用此行选择产品名称和价格 pitem = $(this).parent().siblings(".product").attr('data-price')

应用特定于价格的类允许更有针对性的选择器（我已将product-price类添加到元素中）解决了问题。

＆＃13;

$(document).ready(function() {

    $(".buttonplus").click(function() {
        var inputElement = $(this).parent().find("input");
        var total = inputElement.val();
        inputElement.val(++total);

        /*var event = new Event('change');
        inputElement.get(0).dispatchEvent(event);*/

    });
    $(".buttonminus").click(function() {
        var total = $(this).parent().find("input").val();
        $(this).parent().find("input").val(total -1 < 0 ? 0 : --total); // Shorter version of if statment

        console.log($(this).val());
        /*var newTotal = 0;
         if (total > 0) { newTotal = --total };
         $('#quantity2').val(newTotal);
         */
    });


    $("input").on("change paste keyup", function(){
     console.log($(this).parent().siblings("#total-price2").attr('data-price'));
      console.log($(this).val());

      var nitem = $(this).val(),
          pitem = $(this).parent().siblings(".product-price").attr('data-price'),
          result = parseFloat (nitem) * parseFloat(pitem);
      console.log(result);
      })
});

＆＃13;

body {
    margin: auto;
    max-width: 1400px;
    max-height: inherit;
}

section{
    background-color: #f5f5f7;
}

header {
    max-height: 214px;
    background-color: grey;
    padding: 2%;
    overflow: auto;
}

footer {
    max-height: 214px;
    background-color: grey;
    padding: 2%;
    clear:both;
}

aside {
    float: left;
    margin: 25px;
  width: 325px;
  height: 343px;
  border-radius: 2px;
  background-color: #ffffff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);

}
aside h2{
  width: 182px;
  height: 22px;
  font-size: 18px;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: left;
  color: #343b46;
}


#checkout{
  width: 325px;
  height: 48px;
  border-radius: 2px;
  background-color: #81c02f;

}

img {
    width: 807px;
    height: 462px;
    padding-top: 25px;
    padding-bottom: 186px;
    padding-left: 130px;
    float: left;
}

#nav1 li {
    display: inline;
    float: right;
}

#nav3 li {
    display: inline;
    padding-right: 2%;
}
#divider{
  width: 325px;
  height: 1px;
  background-color: #d8d8d8;
}
#divider2{
  width: 286px;
  height: 1px;
  background-color: #d8d8d8;
}
.quantity-design{
  width: 26.1px;
 height: 18px;
 font-family: Corpid;
 font-size: 15px;
 font-weight: normal;
 font-style: normal;
 font-stretch: normal;
 line-height: normal;
 letter-spacing: normal;
 text-align: center;
 color: #4a4a4a;
}

.article{
  display: inline-block;
  float: left;
  position:relative;;

}
.product{
  display: inline-block;
}
.description span {
  display: block;
  width: 139.5px;
  color: #343b46;
  margin-right: 20px;
  margin-left: 15px;
  margin-bottom: 5px;
  margin-top: 5px;
}

.description span:last-child {
  width: 124px;
  height: 17px;
  font-size: 14px;
  color: #00a6de;
}
#total-price{
  position: relative;
}

.button-design {
    width: 12px;
    height: 14px;
    border-radius: 100%;
    font-size: 14px;
    line-height: 0;
    background-color: #83828a;
    color: white;
    border: 2px solid #83828a;
    padding: 0px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<aside>
    <h2>Warenkorb (X Artikel)</h2>
    <hr id="divider"/>

    <!-- Product 1 -->
  <div class="product1">
    <div class="article">
        <button type="button" class="button-design buttonminus">-</button>
        <input type="text" class="quantity-design quantity" id="quantity1" value="0">
        <button type="button" class="button-design buttonplus">+</button>
    </div>

    <div class="description product">
        <span>Gebratene Maultaschen</span>
        <span>Besonder Wünsche</span>
    </div>
    <div id="total-price" class="product" data-price="7.82">7.82 €</div><br/>
  </div>


    <!-- Product 2 -->
    <div class="product2">
      <div class="article">
          <button type="button" class="button-design buttonminus">-</button>
          <input type="text" class="quantity-design quantity" id="quantity2" value="0">
          <button type="button" class="button-design buttonplus">+</button>
      </div>
      <div class="description product">
          <span>Pastete</span>
          <span>Besonder Wünsche</span>
      </div>
      <div id="total-price2" class="product product-price" data-price="10.8">€</div>
      <hr id="divider2"/>
      <div id="totalprice">
          <span>Summe</span>
          <span>18.60€</span>
      </div>
    </div>

    <button id="checkout" type="button" onclick="">JETZ KAUFEN</button>
</aside>

＆＃13;

如何在Jquery中不使用id调用属性？

1 个答案: