使用 DOM 点击时的递增和递减数答案

【问题标题】：Increment and decrement number on click with DOM使用 DOM 点击时的递增和递减数
【发布时间】：2017-09-22 14:44:13
【问题描述】：

我想在点击+ 和- 时显示递增和递减数字。我该怎么做？谢谢：）

这是我的代码 -->

var minutes = 25,
    seconds = 0,
    isPaused = true,
    timerId = 0,
    remainingTime,
    countdownHandle,
    plus = document.getElementByClassName('plus');
    show = document.getElementByClassName('value');


function plus(){
  $('.plus').on('click', function(){
    minutes++;
    $('.value').html(minutes);
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="control-wrapper" id="session">
    <div class="control-header">SESSION LENGTH</div>
        <div class="control">
          <div class="plus">+</div>
          <div class="value">25</div>
          <div class="minus">-</div>
    </div>
</div>

【问题讨论】：

我把它改成了plus = $('plus')show = $('value')，但还是不行。我的功能还好吗？
请看我的回答。您有多个问题
它将是 plus = $('.plus') - 但无需将其存储在您所在的位置 - 除非您的脚本位于页面末尾，否则它可能还不存在

标签： jquery dom

【解决方案1】：

getElementByClassName 是复数，所以你需要 getElementsByClassName()[0] - 但实际上根本不需要它，因为你有 jQuery。如果您必须使用 DOM，请使用 document.querySelector(".plus")，但目前您的代码中根本没有使用变量 plus 或 show
您需要使用$function() {... }); 而不是您不调用的函数。它在页面加载并且您的元素存在时执行
show 不在 var 中，因为您在前面的一行中有分号

var minutes = 25,
    seconds = 0,
    isPaused = true,
    timerId = 0,
    remainingTime,
    countdownHandle;


$(function() { // on page load
  $('.plus').on('click', function(){
    minutes++;
    $('.value').html(minutes);
  });
  $('.minus').on('click', function(){
    minutes--;
    $('.value').html(minutes);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="control-wrapper" id="session">
    <div class="control-header">SESSION LENGTH</div>
        <div class="control">
          <div class="plus">+</div>
          <div class="value">25</div>
          <div class="minus">-</div>
    </div>
</div>

【讨论】：

为什么我必须用() 包裹function？这是什么意思？
页面加载时执行。类似于 DOM window.onload

【解决方案2】：

给你一个解决方案

$('.plus').click(function(){
  $('.value').html(parseInt($('.value').text()) + 1);
});

$('.minus').click(function(){
  $('.value').html(parseInt($('.value').text()) - 1);
});

.plus, .minus {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="control-wrapper" id="session">
  <div class="control-header">SESSION LENGTH</div>
  <div class="control">
    <div class="plus">+</div>
    <div class="value">25</div>
    <div class="minus">-</div>
  </div>
</div>

希望这会对你有所帮助。

【讨论】：

【解决方案3】：

使用 jquery 很简单

$('.plus').click(function() {
    $('#value').html(function(i, val) { return val*1+1 });
});

$('.minus').click(function() {
    $('#value').html(function(i, val) { return val*1-1 });
});

.control .plus {
  cursor: pointer;
}

.control .minus {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="control-wrapper" id="session">
  <div class="control-header">SESSION LENGTH</div>
  <div class="control">
    <div class="plus">+</div>
    <div id="value">25</div>
    <div class="minus">-</div>
  </div>
</div>

【讨论】：

【解决方案4】：

我尽可能少地修改了您的代码以使其正常工作。

var minutes = 25,
    seconds = 0,
    isPaused = true,
    timerId = 0,
    remainingTime,
    countdownHandle,
    plus = document.querySelector('.plus'),
    show = document.querySelector('.value');



  $('.plus').on('click', function() {
    minutes++;
    $('.value').html(minutes);
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="control-wrapper" id="session">
    <div class="control-header">SESSION LENGTH</div>
        <div class="control">
          <button class="plus">+</button>
          <div class="value">25</div>
          <button class="minus">-</button>
    </div>
</div>

【讨论】：

我相信我已经回答了这个问题 - 并将其包装 $(function() {}) 以便在调用时存在
我在发布之前实际上已经完成了这段代码，但它没有工作，lol