Question

当第一块（英尺）增加/减少时，如何将第二块（英寸）重置为0？

如果您能在这里提供帮助，那将很好。预先感谢。

$(function() {
  $('.minus,.add').on('click', function() {
    var $qty = $(this).closest('.form-height').find('.qty'),
    currentVal = parseInt($qty.text()),
    isAdd = $(this).hasClass('add');
    !isNaN(currentVal) && $qty.text(
    isAdd ? ++currentVal : (currentVal > 0 ? --currentVal : currentVal)
    );
  });
});

.form-height {
  background-color: #eee;
  margin-bottom: 10px;
  padding: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="form-height">
  <span class="qty">5</span> feet
  <img src="https://s8.postimg.cc/vpyob8urp/arrow-down.png" id="minus1" width="20" height="20" class="minus" />
  <img id="add1" src="https://s8.postimg.cc/dae7dv3sl/arrow-up.png" width="20" height="20" class="add" />                  
</div>
<div class="form-height">
  <span class="qty">7</span> inches
  <img src="https://s8.postimg.cc/vpyob8urp/arrow-down.png" id="minus1" width="20" height="20" class="minus" />
  <img id="add1" src="https://s8.postimg.cc/dae7dv3sl/arrow-up.png" width="20" height="20" class="add" />                  
</div>

Answer 1

在您的情况下，这两种形式不是父母和子女，而是锡伯来语。您对代码进行的操作只能处理两种形式之一。

我建议您向您的数量或不同（唯一）ID中添加differend（唯一）类。之后，您可以使用$('.uniqueClass')或$（'＃id'）之类的选择器来选择要编辑的跨度。

父母和孩子是：

<div class="parent">
    <div class="child"></div>
</div>

不是：

<div class='sibling'></div>
<div class='sibling'></div>

Answer 2

我建议您使用input type=number并将简单的input事件侦听器添加到foots输入字段，该事件侦听器会将inch字段的值设置为0：

feet.addEventListener('input', (e) => {
  inches.value=0
})

<label><input type="number" min=0 name="feet" id="feet" /> feet</label>
<label><input type="number" min=0 max=12 name="inches" id="inches" /> inches</label>

如果您出于任何原因必须使用span元素，请按以下步骤操作：

const pluses = [...document.querySelectorAll('.add')];
const minuses = [...document.querySelectorAll('.minus')];

for (const plus of pluses) {
  plus.addEventListener('click', (e) => {
    const qty = e.target.closest('.form-height').querySelector('.qty');
    console.log(qty.dataset);
    qty.dataset.qty = parseInt(qty.dataset.qty)+1 > 12 ? 12 : parseInt(qty.dataset.qty)+1;
    if (qty.classList.contains('feet')) {
      document.querySelector('.inches').dataset.qty = 0;
    }
    if (qty.classList.contains('inches')) {
      qty.dataset.qty = parseInt(qty.dataset.qty) > 12 ? 12 : parseInt(qty.dataset.qty);
    }
  })
}

for (const minus of minuses) {
  minus.addEventListener('click', (e) => {
    const qty = e.target.closest('.form-height').querySelector('.qty');
    qty.dataset.qty = parseInt(qty.dataset.qty)-1 < 0 ? 0 : parseInt(qty.dataset.qty)-1;
    if (qty.classList.contains('feet')) {
      document.querySelector('.inches').dataset.qty = 0;
    }
  })
}

[data-qty]::before {
  content: attr(data-qty);
}

<div class="form-height">
  <span class="qty feet" data-qty="5"></span> feet
  <img src="https://s8.postimg.cc/vpyob8urp/arrow-down.png" id="minus1" width="20" height="20" class="minus" />
  <img id="add1" src="https://s8.postimg.cc/dae7dv3sl/arrow-up.png" width="20" height="20" class="add" />
</div>
<div class="form-height">
  <span class="qty inches" data-qty="7"></span> inches
  <img src="https://s8.postimg.cc/vpyob8urp/arrow-down.png" id="minus1" width="20" height="20" class="minus" />
  <img id="add1" src="https://s8.postimg.cc/dae7dv3sl/arrow-up.png" width="20" height="20" class="add" />
</div>

Answer 3

HTML：-

<h5>Height</h5>
<div class="form-height">
  <span class="qty">5</span> feet
  <img src="https://s8.postimg.cc/vpyob8urp/arrow-down.png" id="minus1" width="20" height="20" class="minus" />
  <img id="add1" src="https://s8.postimg.cc/dae7dv3sl/arrow-up.png" width="20" height="20" class="add" />                  
</div>
<div class="form-height">
  <span class="qty" id="inches">7</span> inches
  <img src="https://s8.postimg.cc/vpyob8urp/arrow-down.png" id="minus2" width="20" height="20" class="minus" />
  <img id="add2" src="https://s8.postimg.cc/dae7dv3sl/arrow-up.png" width="20" height="20" class="add" />                  
</div>

jQuery：-

$(function() {
  $('.minus,.add').on('click', function(e) {
  var targetId = e.currentTarget.id;
  if(targetId == 'add1' || targetId == 'minus1'){
  $('#inches').text(0);
  }
  if(targetId == 'add2' &&  parseInt($('#inches').text()) >= 7){
   alert('maximum height reached');
   return false;
  }
    var $qty = $(this).closest('.form-height').find('.qty'),
    currentVal = parseInt($qty.text()),
    isAdd = $(this).hasClass('add');
    !isNaN(currentVal) && $qty.text(
    isAdd ? ++currentVal : (currentVal > 0 ? --currentVal : currentVal)
    );
  });
});

这是有效的jsfiddle http://jsfiddle.net/xpvt214o/677928/

在另一个字段中重置值

3 个答案: