Question

我编写了一个脚本，根据点击次数，将各个字段值设置为特定值。该脚本正常，只出现一个问题。当第一个字段为MAX（情况5）时，单击加号后，下一个字段中没有任何内容。

我无法弄清楚为什么一段脚本是错的。你能帮忙吗？

click = 0;
	
$(".max").on("click", function() {
		
	elem = $(this).prev();
		
	switch(click) {
		case 0:
		elem.animateNumber({number: 25000});
		break;
		case 1:
		elem.animateNumber({number: 50000});
		break;
		case 2:
		elem.animateNumber({number: 75000});
		break;
		case 3:
		elem.animateNumber({number: 100000});
		break;
		case 4:
		elem.animateNumber({number: 500000});
		break;
		case 5:
		elem.text("MAX");
		break;
	}

	click++;
		
});
	
$(".min").on("click", function() {
	
	elem = $(this).next();
		
	switch(click) {
	case 0:
	elem.text("MIN");
	break;
	case 1:
	elem.animateNumber({number: 10000});
	break;
	case 2:
	elem.animateNumber({number: 25000});
	break;
	case 3:
	elem.animateNumber({number: 50000});
	break;
	case 4:
	elem.animateNumber({number: 75000});
	break;
	case 5:
	elem.animateNumber({number: 100000});
	break;
	}

	click--;
		
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-animateNumber/0.0.14/jquery.animateNumber.js"></script>
<section class="gen-box-field">
   <button type="button" class="min">-</button>
   <div id="param1">10000</div>
   <button type="button" class="max">+</button>
</section>
<section class="gen-box-field">
   <button type="button" class="min">-</button>
   <div id="param2">10000</div>
   <button type="button" class="max">+</button>
</section>

Answer 1

所以我创建了一个名为click的数组，然后我使用.gen-box-field容器的索引作为数组中我想要的值的位置。我试图发表评论足以让它变得有意义，随时可以询问是否有任何混淆。

我做的另一个改变是，我没有在min和max按钮的事件处理程序中对回调进行硬编码，而是创建了一个用于回调的单个函数。两种情况下的功能完全相同，唯一的区别是递增或递减。这样做可以节省编码时间，如果您需要调试，则只需在一个位置进行调试。

祝你好运！

＆＃13;

// as I've got multiple gen-box-field, I need an array for
//  to store the click values. Or, as another poster mentioned,
//  I could also store the data-click attribute directly on the
//  param field, for example.
var click = [-1, -1];

// As both .max and .min do the exact same thing, we can really
//  use the same callback function for both.
function handleClick(event) {

  // for my own convenience, I create a reference to the clicked
  //   button.
  var clickedEl = $(this);
  // This tells me which of the gen-box-field containers holds the
  //   button that was clicked. I'll use that to index the click
  //   array. we use index('.gen-box-field") as we don't want ALL
  //   sibling nodes of the .gen-box-field, simply that collection.
  var which = clickedEl.parents(".gen-box-field").index(".gen-box-field");
  // reference to the element we'll be animating.
  var elem = clickedEl.parents(".gen-box-field").find(".param");

  // The math to count clicks should happen BEFORE the animation.
  //  Otherwise, clicking the + and then the - results in weird
  //  behaviors. Using the class of the clicked el, we can see
  //  if it is the + or the - that has been clicked, and do math!
  if (clickedEl.hasClass("max") && click[which] < 5) {
    // It was the plus button. Increment!
    click[which]++;
  } else if (clickedEl.hasClass("min") && click[which] >= 0) {
    // It was the minus button. down, down to goblin town...
    click[which]--
  }

  // And having incremented or decremented, do the animation.
  switch (click[which]) {
    case -1:
      elem.text("MIN");
      break;
    case 0:
      elem.animateNumber({
        number: 25000
      });
      break;
    case 1:
      elem.animateNumber({
        number: 50000
      });
      break;
    case 2:
      elem.animateNumber({
        number: 75000
      });
      break;
    case 3:
      elem.animateNumber({
        number: 100000
      });
      break;
    case 4:
      elem.animateNumber({
        number: 500000
      });
      break;
    case 5:
      elem.text("MAX");
      break;
  }
};

// BOTH buttons get the same callback function. Thus, no code 
//   is being duplicated, any fixes I need to make all happen in
//   one place. Easy-peasy!
$(".max").on("click", handleClick);

$(".min").on("click", handleClick);

＆＃13;

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-animateNumber/0.0.14/jquery.animateNumber.js"></script>
<section class="gen-box-field">
  <button type="button" class="min">-</button>
  <div class="param" id="param1">10000</div>
  <button type="button" class="max">+</button>
</section>
<section class="gen-box-field">
  <button type="button" class="min">-</button>
  <div class="param" id="param2">10000</div>
  <button type="button" class="max">+</button>
</section>

＆＃13;

要回答关于为什么单击+然后 - 导致值递增而不是递减的问题，增量/减量数学在动画之后发生。大脑脱离了什么。所以它是根据最后的点击结果而不是CURRENT点击结果。相反，我在动画之前移动了数学，并且所有都按预期工作。

当值为5时，不执行第二个元素的情况

1 个答案: