Question

<div class="section">
  <div class="count">2 <button class="click">Click</button><button class="delete">Delete</button></div>
  <div class="count">3 <button class="click">Click</button><button class="delete">Delete</button></div>
  <div class="count">4 <button class="click">Click</button><button class="delete">Delete</button></div>
</div>
<div class="section">
  <div class="count">2 <button class="click">Click</button><button class="delete">Delete</button></div>
  <div class="count">3 <button class="click">Click</button><button class="delete">Delete</button></div>
  <div class="count">4 <button class="click">Click</button><button class="delete">Delete</button></div>
</div>

此函数counter（）用于多种用途，因此我更喜欢不加修改

$.fn.counter = function() {
  var counter = 1;
  $(this).closest('.section').find('.count').each(function(){
    $(this).text(counter);
    counter++;
  })
};

此功能更新计数

$('body').on('click', '.click', function(){
    $(this).closest('.count').addClass('active').counter();
});

此功能不会更新计数，因为元素已被删除

有没有办法在删除元素后立即调用函数counter（）？我需要更新部分内未删除的剩余计数。

$('body').on('click', '.delete', function(){
    var self = $(this).closest('.count');
    $(this).closest('.count').remove().counter();
});

https://jsfiddle.net/michaelyuen/duopttkk/

Answer 1

首先，您的插件逻辑有两个缺陷（$.fn.counter）。 this，在您的函数中已经是一个jQuery对象，所以不需要$(this).closest(...)，只需执行this.closest(...)。

此外，您应该在函数末尾返回this。这将允许链接方法，并部分解决您的问题。所以你的插件应该是这样的：

$.fn.counter = function() {
  var counter = 1;
  this.closest('.section').find('.count').each(function(){
    $(this).text(counter);
    counter++;
  });
  return this;
};

完成这些更改后，只需反转.counter功能和.remove：

$(this).closest('.count').counter().remove();

在理解你要考虑计数器外的当前元素之后，你的函数必须改变一下。如果没有这些更改，就无法实现您想要的效果，因为当您删除.count时，它不再位于div.section内，因此closest会返回一个空对象。

您需要为插件添加参数。该参数将默认为falsy值，因此不会影响您的其他函数调用。

$.fn.counter = function( ignore_self ) {
  var counter = 1;
  var $counters = this.closest('.section').find('.count');
  if( ignore_self ) $counters = $counters.not(this);

  $counters.each(function(){
    $(this).text(counter);
    counter++;
  });
  return this;
};

然后，在删除元素之前调用counter时，传递true：

$(this).closest('.count').counter(true).remove();

实例：https://jsfiddle.net/duopttkk/4/

Answer 2

此函数counter（）用于多种用途，因此我更喜欢不加修改

相反，如果你可以改变这样的功能，那就是我的建议。

您的问题在这一行：

$(this).text(counter);

你的内在元素是：

<div class="count">2 <button class="click">
............................

因此，如果要将数字2更改为另一个值，则需要获取该节点。这样的节点是一个文本节点，您可以按节点类型进行过滤（不能使用文本方法）：

$(ele).contents().filter(function(idx, ele) {
      return ele.nodeType == Node.TEXT_NODE;
}).first().get(0).textContent = counter;

来自你的评论：

实际上是＆lt; span＆gt;在里面。

通过这种方式，您可以简化计数器：

$.fn.counter = function() {
    $(this).closest('.section').find('.count span').each(function(idx, ele){
        $(ele).text(idx + 1);
    })
};

// this function counter is for multiple purpose so I prefer not to keep without modification
$.fn.counter = function() {
    $(this).closest('.section').find('.count span').each(function(idx, ele){
        $(ele).text(idx + 1);
    })
};


// this function update count

$('body').on('click', '.click', function(){
    $(this).closest('.count').addClass('active').counter();
});

// this function doesn't update count since element is removed
// Is there a way to fire function after event target is removed

$('body').on('click', '.delete', function(){
    var self = $(this).closest('.count');
    $(this).closest('.count').remove().counter();
});

.active {
    background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="section">
    <div class="count"><span>2</span><button class="click">Click</button><button class="delete">Delete</button></div>
    <div class="count"><span>3</span><button class="click">Click</button><button class="delete">Delete</button></div>
    <div class="count"><span>4</span><button class="click">Click</button><button class="delete">Delete</button></div>
</div>
<div class="section">
    <div class="count"><span>2</span><button class="click">Click</button><button class="delete">Delete</button></div>
    <div class="count"><span>3</span><button class="click">Click</button><button class="delete">Delete</button></div>
    <div class="count"><span>4</span><button class="click">Click</button><button class="delete">Delete</button></div>
</div>

有没有办法在删除选择器后立即调用函数 - jQuery

2 个答案: