Question

使用jQuery和JavaScript，我试图编写一些代码来设置一个或多个小部件。该小部件接受input中的文本，并在单击ul时将其添加到button中。

然后将项目添加到ul中，点击侦听器是一种用于在单击时删除特定项目的设置。

代码如下：

    function WidgetThing(className) {
    	
      var items = [];
      
      function removeItem(e) {
        var idx = parseInt($(e.target).attr('data-index'));
        items.splice(idx, 1);
        updateItems();
      }
    
    	function updateItems() {
      	var ul = $('.' + className + ' .items ul');
        ul.html('');
      	items.forEach(function(item, idx) {
        	ul.append('<li data-index="' + idx + '">' + item + '</li>');
        });
        ul.on('click', 'li', removeItem);
      }
    
      $('.' + className + ' .add-button').click(function(e) {
      	var input = $('.' + className + ' input');
      	items.push(input.val());
        input.val('');
        updateItems();
      });
    
    }
    
    $(document).ready(function() {
    	WidgetThing('widget1');
      WidgetThing('widget2');
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Widget1
    <div class="widget1">
      <div class="controls">
        <input type="text" />
        <button class='add-button'>Add Item</button>
      </div>
    
      <div class="items">
        <ul></ul>
      </div>
    </div>
    
    Widget2
    <div class="widget2">
      <div class="controls">
        <input type="text" />
        <button class='add-button'>Add Item</button>
      </div>
    
      <div class="items">
        <ul></ul>
      </div>
    </div>

这对添加项目很好用。

但是，如果我单击该项目将其删除，它还会删除所选项目下的所有个项目。

如何使此代码起作用？我采用错误的方法吗？

更新说明：：在实际应用中，我的updateItems()函数有一些副作用，因此我需要采用这种方法从数组中删除项目。

Answer 1

Working fiddle 。

这可以用更少的代码来实现，您可以将两个事件之一附加到按钮上，将另一个附加到li元素上以进行删除：

$(document).ready(function() {
  $('.add-button').click(function() {
    var items = $(this).closest('.controls').next('.items');
    $('ul', items).append('<li>' + $(this).prev('input').val() + '</li>');
  });

  $('ul').on('click', 'li', function() {
    $(this).remove();
  });
});

这是一个有效的代码段：

$(document).ready(function() {
  $('.add-button').click(function() {
    var items = $(this).closest('.controls').next('.items');
    $('ul', items).append('<li>' + $(this).prev('input').val() + '</li>');
  });

  $('ul').on('click', 'li', function() {
    $(this).remove();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Widget1
<div class="widget1">
  <div class="controls">
    <input type="text" />
    <button class='add-button'>Add Item</button>
  </div>

  <div class="items">
    <ul></ul>
  </div>
</div>

Widget2
<div class="widget2">
  <div class="controls">
    <input type="text" />
    <button class='add-button'>Add Item</button>
  </div>

  <div class="items">
    <ul></ul>
  </div>
</div>

为动态添加的HTML分配功能

1 个答案: