jQuery查找每個專案-有解無憂

我有多個相同類的元素，我想自定義它們，我可以分離我的輸入值，但我不知道如何自定義我的跨度值。

jQuery('.qty').each(function(){

    if( jQuery(this).val() == jQuery(this).attr("max") ){
        jQuery(this).find('plus').text("Max Value");
    }
    else if( jQuery(this).val() == jQuery(this).attr("min") ){
            jQuery(this).find('min').text("Min Value");
    }
});

input{
  line-height:25px;
  width:150px;
  margin:10px 0;
}
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {  
   opacity: 1;
}
span{
  font-size:15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="minus"></span>
<input type="number" class="qty" value="1" min="1" max="4">
<span class="plus"></span>
<br>
<span class="minus"></span>
<input type="number" class="qty" value="1" min="1" max="2">
<span class="plus"></span>
<br>
<span class="minus"></span>
<input type="number" class="qty" value="1" min="1" max="3">
<span class="plus"></span>

提前致謝。

uj5u.com熱心網友回復：

您的代碼中存在一些問題。

首先，您需要.qty在用戶與其互動時檢查每個元素的值，而不是在頁面加載時。為此，將您的邏輯掛接到input事件處理程式上。

從那里你需要使用prev()和next()獲取span元素，因為它們是input. find()旨在搜索子元素，因此在這種情況下不適用。您還需要.在選擇器中的類名中包含前綴。

更進一步，您可以else在if陳述句中添加一個子句，在未選擇最小值/最大值時洗掉文本標簽。

最后，span每個集合中第一個的正確類是.minus，而不是.min。

jQuery($ => {
  $('.qty').on('input', function() {
    let $el = $(this);    
    
    if ($el.val() == $el.attr("max")) {
      $el.next('.plus').text("Max Value");
    } else if ($el.val() == $el.attr("min")) {
      $el.prev('.minus').text("Min Value");
    } else {
      $el.next('.plus').text("");
      $el.prev('.minus').text("");
    }
  });
});

input {
  line-height: 25px;
  width: 150px;
  margin: 10px 0;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  opacity: 1;
}

span {
  font-size: 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="minus"></span>
<input type="number" class="qty" value="1" min="1" max="4">
<span class="plus"></span>

<br />

<span class="minus"></span>
<input type="number" class="qty" value="1" min="1" max="2">
<span class="plus"></span>

<br />

<span class="minus"></span>
<input type="number" class="qty" value="1" min="1" max="3">
<span class="plus"></span>

另請注意，您可以通過jQuery在 document.ready 處理程式中使用別名來使代碼更加簡潔，正如我在上面的示例中所做的那樣，您可以$再次訪問該變數。

此外，“快取” jQuery 物件是一種很好的做法，因為訪問 DOM 和構建 jQuery 物件是（相對）緩慢的操作，因此您希望盡可能少地執行此操作。在上面的示例中，您可以看到我$(this)只訪問了一次并將其值存盤在每個事件處理程式中的變數中。

uj5u.com熱心網友回復：

使用當前的 HTML，您將使用prev來獲取minus跨度并next獲取plus跨度（但請繼續閱讀）。您可能還想在條件不成立時清除跨度，并在值更改時更新：

function update() {
    jQuery('.qty').each(function() {
        const input = jQuery(this);
        const val = input.val();
        input.next().text(
            val == input.attr("max")
            ? "Max value"
            : ""
        );
        input.prev().text(
            val == input.attr("min")
            ? "Min value"
            : ""
        );
    });
}
update();
jQuery(".qty").on("input", update);

現場示例：

顯示代碼片段

function update() {
    jQuery('.qty').each(function() {
        const input = jQuery(this);
        const val = input.val();
        input.next().text(
            val == input.attr("max")
            ? "Max value"
            : ""
        );
        input.prev().text(
            val == input.attr("min")
            ? "Min value"
            : ""
        );
    });
}
update();
jQuery(".qty").on("input", update);

input{
  line-height:25px;
  width:150px;
  margin:10px 0;
}
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {  
   opacity: 1;
}
span{
  font-size:15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="minus"></span>
<input type="number" class="qty" value="1" min="1" max="4">
<span class="plus"></span>
<br>
<span class="minus"></span>
<input type="number" class="qty" value="1" min="1" max="2">
<span class="plus"></span>
<br>
<span class="minus"></span>
<input type="number" class="qty" value="1" min="1" max="3">
<span class="plus"></span>

但對我來說，這很脆弱。我將每組元素包裝在 a 中div，如下所示：

<div>
    <span class="minus"></span>
    <input type="number" class="qty" value="1" min="1" max="4">
    <span class="plus"></span>
</div>

...然后用于jQuery(this).closest("div").find(/*...*/)查找plus和minus元素：

function update() {
    jQuery('.qty').each(function() {
        const input = jQuery(this);
        const val = input.val();
        const div = input.closest("div");
        div.find(".plus").text(
            val == input.attr("max")
            ? "Max value"
            : ""
        );
        div.find(".minus").text(
            val == input.attr("min")
            ? "Min value"
            : ""
        );
    });
}
update();
jQuery(".qty").on("input", update);

（請注意，我一直在尋找.minus，而不是.min尋找 span。）

現場示例：

顯示代碼片段

function update() {
    jQuery('.qty').each(function() {
        const input = jQuery(this);
        const val = input.val();
        const div = input.closest("div");
        div.find(".plus").text(
            val == input.attr("max")
            ? "Max value"
            : ""
        );
        div.find(".minus").text(
            val == input.attr("min")
            ? "Min value"
            : ""
        );
    });
}
update();
jQuery(".qty").on("input", update);

input{
  line-height:25px;
  width:150px;
  margin:10px 0;
}
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {  
   opacity: 1;
}
span{
  font-size:15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
    <span class="minus"></span>
    <input type="number" class="qty" value="1" min="1" max="4">
    <span class="plus"></span>
</div>
<div>
    <span class="minus"></span>
    <input type="number" class="qty" value="1" min="1" max="2">
    <span class="plus"></span>
</div>
<div>
    <span class="minus"></span>
    <input type="number" class="qty" value="1" min="1" max="3">
    <span class="plus"></span>
</div>

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

標籤：查询

上一篇：如何從字串加載腳本標簽？

下一篇：jQuery點擊元素后的偽