jQuery $(this) 关键字在插件中不起作用

Question

我正在做这个演示。为什么this在这里不起作用？如您所见，单击每个按钮会影响其他.btn-nums而它应该只影响

var out = this.find('.btn-nums');

因为this.find('.btn-nums')

(function($) {
   $.fn.spiner = function() {
      var temp = 0.0;
      var inc = this.find('.btn-add');
      var out = this.find('.btn-nums');    
      var dec = this.find('.btn-less'); 
      var step = $(this).data('step');
      
      inc.on("mousedown", function() {
         temp =  temp + step;
         out.html(temp);
      })
   }
}(jQuery));
$('.spiner').spiner();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="spiner" data-step="0.5">
    <button type="button" class="btn btn-less">-</button>
    <button type="button" class="btn btn-nums">0.00</button>
    <button type="button" class="btn btn-add">+</button>
</div>
<div class="spiner" data-step="1">
    <button type="button" class="btn btn-less">-</button>
    <button type="button" class="btn btn-nums">0.00</button>
    <button type="button" class="btn btn-add">+</button>
</div>

Answer 1

您可以添加$(this).each() .

如果不添加$(this).each()则$(this)表示这两个$('.spiner')

(function($) {
  $.fn.spiner = function() {
    $(this).each(function() {
      var temp = 0.0;
      var inc = $(this).find('.btn-add');
      var out = $(this).find('.btn-nums');
      var dec = $(this).find('.btn-less');
      var step = $(this).data('step');
      inc.on("mousedown", function() {
        temp = temp + step;
        out.html(temp);
      })
    });
  }
}(jQuery));
$('.spiner').spiner();

演示

(function($) {
  $.fn.spiner = function() {
    $(this).each(function() {
      var temp = 0.0;
      var inc = $(this).find('.btn-add');
      var out = $(this).find('.btn-nums');
      var dec = $(this).find('.btn-less');
      var step = $(this).data('step');
      inc.on("mousedown", function() {
        temp = temp + step;
        out.html(temp);
      })
    });
  }
}(jQuery));
$('.spiner').spiner();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="spiner" data-step="0.5">
  <button type="button" class="btn btn-less">-</button>
  <button type="button" class="btn btn-nums">0.00</button>
  <button type="button" class="btn btn-add">+</button>
</div>
<div class="spiner" data-step="1">
  <button type="button" class="btn btn-less">-</button>
  <button type="button" class="btn btn-nums">0.00</button>
  <button type="button" class="btn btn-add">+</button>
</div>

Answer 2

你也可以使用此代码来建立递减 =）

(function($) {
  $.fn.spiner = function() {
    $(this).each(function() {
      var temp = 0.0;
      var inc = $(this).find('.btn-add');
      var out = $(this).find('.btn-nums');
      var dec = $(this).find('.btn-less');
      var step = $(this).data('step');
      inc.on("mousedown", function() {
        temp = temp + step;
        out.html(temp);
      })
      dec.on("mousedown", function() {
        temp = temp - step;
        out.html(temp);
      })
    });
  }
}(jQuery));
$('.spiner').spiner();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="spiner" data-step="0.5">
  <button type="button" class="btn btn-less">-</button>
  <button type="button" class="btn btn-nums">0.00</button>
  <button type="button" class="btn btn-add">+</button>
</div>
<div class="spiner" data-step="1">
  <button type="button" class="btn btn-less">-</button>
  <button type="button" class="btn btn-nums">0.00</button>
  <button type="button" class="btn btn-add">+</button>
</div>