代码之家 › 专栏 › 技术社区 › Mona Coder

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

jquery

Mona Coder · 技术社区 · 7 年前

你能看看这个演示并告诉我为什么 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>

2 回复 | 直到 7 年前

Carsten Løvbo Andersen Dan Nemtanu 7 年前

你可以添加 $(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>

-1

XraySensei 7 年前

您也可以使用此代码建立递减率=)

(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>