為什么變數的實際值為1，但它等于0？-有解無憂

按“YES”按鈕并嘗試按“-”和“ ”按鈕更改數字。

我使用 next() 方法從 html 獲取數量變數。

在減少和增加函式中，我 console.log() 的數量變數，由于某種原因它等于 0，盡管它的實際值為 1。而且在 js 檔案的第 20 行中，我 console.log() 的數字和它的值是 1。

如何正確獲取號碼？

$(function() {
  function decrease() {
    let amount = Number($(this).next().next().children("div").eq(1).text());
    console.log(amount);
    if (amount - 1 >= 1) {
      Number($(this).next().next().children("div").eq(1).text(amount - 1));
    }
  }

  function increase() {
    let amount = Number($(this).next().next().children("div").eq(1).text());
    console.log(amount);
    $(this).next().next().children("div").eq(1).text(amount   1);
  }

  let flag = false
  
  $(".yes").click(function() {
    if (flag === false) {
      $(this).css("background", "rgb(255, 74, 74)");
      $(this).next().next().css("opacity", 1);
      console.log(Number($(this).next().next().children("div").eq(1).text()));
      $(this).next().next().children("div").eq(0).bind("click", decrease);
      $(this).next().next().children("div").eq(2).bind("click", increase);
      $(this).next().next().children("div").eq(0).css("cursor", "pointer");
      $(this).next().next().children("div").eq(2).css("cursor", "pointer");
      flag = true;
    } else {
      $(this).css("background", "transparent");
      $(this).next().next().css("opacity", 0.5);
      $(this).next().next().children("div").eq(0).unbind("click", decrease);
      $(this).next().next().children("div").eq(2).unbind("click", increase);
      $(this).next().next().children("div").eq(0).css("cursor", "default");
      $(this).next().next().children("div").eq(2).css("cursor", "default");
      flag = false;
    }
  });
});

.product-list {
  display: grid;
  grid-template-rows: 97px 97px 97px;
  grid-template-columns: 150px 1fr auto 1fr auto;
  /* max-width: 1200px; */
  /* row-gap: 25px; */
}

.product-list .name,
.product-list .indent1,
.product-list .yes,
.product-list .indent2,
.product-list .selector {
  margin-bottom: 25px;
}

.name {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center;
}

.yes {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border: 1px solid #222;
  padding: 0 5px;
  cursor: pointer;
}

.selector {
  /* grid-area: selector; */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center;
  padding: 0 15px;
  opacity: 0.5;
}

.selector div:nth-child(1) {
  border: 1px solid #222;
}

.selector div:nth-child(3) {
  border: 1px solid #222;
}

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<form class="product-list">
  <div class="name">
    <div>Product 1</div>
    <div>2 units</div>
  </div>
  <div class="indent1"></div>
  <div class="yes">
    <div>YES</div>
  </div>
  <div class="indent2"></div>
  <div class="selector">
    <div style="margin-left: 15px; margin-right: 15px; background: transparent; width: 35px;">-</div>
    <div style="margin-right: 15px; border: none; background: transparent; cursor: default;">1</div>
    <div style="margin-right: 15px; background: transparent; width: 35px;"> </div>
  </div>
  <div class="name">
    <div>Product 2</div>
    <div>2 units</div>
  </div>
  <div class="indent1"></div>
  <div class="yes">
    <div>YES</div>
  </div>
  <div class="indent2"></div>
  <div class="selector">
    <div style="margin-left: 15px; margin-right: 15px; background: transparent; width: 35px;">-</div>
    <div style="margin-right: 15px; border: none; background: transparent; cursor: default;">1</div>
    <div style="margin-right: 15px; background: transparent; width: 35px;"> </div>
  </div>
  <div class="name">
    <div>Product 3</div>
    <div>2 units</div>
  </div>
  <div class="indent1"></div>
  <div class="yes">
    <div>YES</div>
  </div>
  <div class="indent2"></div>
  <div class="selector">
    <div style="margin-left: 15px; margin-right: 15px; background: transparent; width: 35px;">-</div>
    <div style="margin-right: 15px; border: none; background: transparent; cursor: default;">1</div>
    <div style="margin-right: 15px; background: transparent; width: 35px;"> </div>
  </div>
</form>

https://codepen.io/CodingNinja619/pen/LYeVRXL

uj5u.com熱心網友回復：

您selectors的結果文本（金額）是錯誤的，他們沒有提取正確的文本。這就是它無法進行操作或設定文本的原因

您需要更改increase()和decrease()功能中的選擇器

從

$(this).next().next().children("div").eq(1).text()

到

$(this).next().text() //for decrease as element is next to it
$(this).prev().text() //for increase as element is before

Working Code below

顯示代碼片段

$(function() {
  function decrease() {
    let amount = Number($(this).next().text());
    console.log(amount);
    if (amount - 1 >= 1) {
      Number($(this).next().text(amount - 1));
    }
  }

  function increase() {
    let amount = Number($(this).prev().text());
    console.log("y"   amount);
    $(this).prev().text(amount   1);
  }

  let flag = false
  $(".yes").click(function() {
    if (flag === false) {
      $(this).css("background", "rgb(255, 74, 74)");
      $(this).next().next().css("opacity", 1);
      console.log(Number($(this).next().next().children("div").eq(1).text()));
      $(this).next().next().children("div").eq(0).bind("click", decrease);
      $(this).next().next().children("div").eq(2).bind("click", increase);

      $(this).next().next().children("div").eq(0).css("cursor", "pointer");
      $(this).next().next().children("div").eq(2).css("cursor", "pointer");

      flag = true;
    } else {
      $(this).css("background", "transparent");
      $(this).next().next().css("opacity", 0.5);
      $(this).next().next().children("div").eq(0).unbind("click", decrease);
      $(this).next().next().children("div").eq(2).unbind("click", increase);

      $(this).next().next().children("div").eq(0).css("cursor", "default");
      $(this).next().next().children("div").eq(2).css("cursor", "default");

      flag = false;
    }
  });
});

.product-list {
  display: grid;
  grid-template-rows: 97px 97px 97px;
  grid-template-columns: 150px 1fr auto 1fr auto;
  /* max-width: 1200px; */
  /* row-gap: 25px; */
}

.product-list .name,
.product-list .indent1,
.product-list .yes,
.product-list .indent2,
.product-list .selector {
  margin-bottom: 25px;
}

.name {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center;
}

.yes {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border: 1px solid #222;
  padding: 0 5px;
  cursor: pointer;
}

.selector {
  /* grid-area: selector; */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center;
  padding: 0 15px;
  opacity: 0.5;
}

.selector div:nth-child(1) {
  border: 1px solid #222;
}

.selector div:nth-child(3) {
  border: 1px solid #222;
}

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<form class="product-list">
  <div class="name">
    <div>Product 1</div>
    <div>2 units</div>
  </div>
  <div class="indent1"></div>
  <div class="yes">
    <div>YES</div>
  </div>
  <div class="indent2"></div>
  <div class="selector">
    <div style="margin-left: 15px; margin-right: 15px; background: transparent; width: 35px;">-</div>
    <div style="margin-right: 15px; border: none; background: transparent; cursor: default;">1</div>
    <div style="margin-right: 15px; background: transparent; width: 35px;"> </div>
  </div>

  <div class="name">
    <div>Product 2</div>
    <div>2 units</div>
  </div>
  <div class="indent1"></div>
  <div class="yes">
    <div>YES</div>
  </div>
  <div class="indent2"></div>
  <div class="selector">
    <div style="margin-left: 15px; margin-right: 15px; background: transparent; width: 35px;">-</div>
    <div style="margin-right: 15px; border: none; background: transparent; cursor: default;">1</div>
    <div style="margin-right: 15px; background: transparent; width: 35px;"> </div>
  </div>

  <div class="name">
    <div>Product 3</div>
    <div>2 units</div>
  </div>
  <div class="indent1"></div>
  <div class="yes">
    <div>YES</div>
  </div>
  <div class="indent2"></div>
  <div class="selector">
    <div style="margin-left: 15px; margin-right: 15px; background: transparent; width: 35px;">-</div>
    <div style="margin-right: 15px; border: none; background: transparent; cursor: default;">1</div>
    <div style="margin-right: 15px; background: transparent; width: 35px;"> </div>
  </div>

</form>

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/444063.html

標籤：javascript html jQuery css

上一篇：如何使用引導標簽輸入

下一篇：單擊功能上的重新編碼器引導列