JQuery 选择列表项

Question

点击后我想从列表中选择一个项目；我试过附加类和类似的东西，但点击事件似乎无法识别列表项，这些项目也需要稍后删除，所以我认为给它们类是这种情况下的最佳选择这是我的代码：

function newElement() {
  $(document).ready(function() {
    $("#UL").append($("<li>").html($("input").val()).addClass("Item"));
  });

};

$(".item").click(function() {
  var $items = $('li'),
    $selected = $items.filter('.selected').removeClass('selected'),
    $next;
  // first time only when no selected exists, remove if you automatically select first one
  if (!$selected.length) {
    $next = $items.first();
  } else {
    $next = $selected.is($items.last()) ? $items.first() : $selected.next();
  }

  $next.addClass('selected')

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div id="div1" class="header">
  <input type="text" id="input" placeholder="...">
  <span onclick="newElement()" class="addBtn">Add</span>
</div>

<ul id="UL" class="nyList">
  <li class="item">blank 1</li>
  <li class="item">blank 2</li>
  <li class="item">blank 3</li>
</ul>

Answer 1

如果我理解你的问题，下一个<li> 必须获得所选课程。

然后使用您的代码稍作更改即可实现。

先加个data-key

<ul id="UL" class="nyList">
    <li data-key='0' class="item">blank 1</li>
    <li data-key='1' class="item">blank 2</li>
    <li data-key='2' class="item">blank 3</li>
</ul>

然后将该标记用于点击事件

$(".item").click(function() {
    var $items = $('li'), $next;
    var target = $(this).data('key') + 1 ;
    $items.removeClass('selected')
    if (target >= $items.length) {
        $next = $items[0];
    } else {
        $next = $items[target];
    }
    $next.classList.add('selected');
});

Answer 2

如果您的问题是如何动态添加列表项并分配事件处理程序以单击它们，您可以这样做：（在下面的示例中，我只是切换选定的类）

function newElement() {
  $("#UL").append($("<li>").html($("input").val()).addClass("item"));
};

$('#UL').on('click', '.item', function() {
  const target = $(this);
  const shouldSelect = !target.hasClass('selected');

  $('#UL li.selected').removeClass('selected');
  shouldSelect && target.addClass('selected');
});

.selected {
  background: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

<div id="div1" class="header">
  <input type="text" id="input" placeholder="...">
  <span onclick="newElement()" class="addBtn">Add</span>
</div>
<ul id="UL" class="nyList">
  <li class="item">blank 1</li>
  <li class="item">blank 2</li>
  <li class="item">blank 3</li>
</ul>

Answer 3

您的问题对“选择”语句有点不清楚，因此，我假设您想对选定的元素做一些事情——比如删除它；所以我添加了该功能的示例。

我建议的一些关于代码和更改的 cmets：

• 不需要将追加内容放在函数中的文档就绪事件处理程序中 - 这实际上是添加一个新的事件处理程序，因为该事件已被触发，所以该处理程序永远不会触发。
• 在 Item 与 item 中的 .addClass("Item")); 中使用了错误的类 .addClass("Item")); JavaScript 当使用类值时区分大小写
• 我克隆了第一个.itemli，以防万一所有li被删除，否则我克隆第一个“添加”以允许更多模块化代码 - 如果你最终在您的li 中添加更多“内部”，例如跨度或类似的东西 - 比“使用复杂的标记添加在那里创建它”更容易“修改它”。示例 <li class="item"><span class="ml-1">blank</span> 1</li>
• 使用 'UL' 或其他标签名称作为 id 选择器不是一个好的选择，所以我给 ul 一个 id 而不是 <ul id="my-ul-list"
• 缓存了$myList，以便为具有 id 的新 ul 更轻松地重构
• 添加了一个按钮来触发删除您问题中提到的选定li - 如果需要，您可以从中重构。

// save a cloned item to add when we remove them all
let clonedItemSave = $('#my-ul-list').find('.item').first().clone(true, true);
let $myList = $('#my-ul-list');

function newElement(event) {
  let clonedItem =
    (!!$myList.find('.item').length) ?
    $myList.find('.item').first().clone(true, true) : clonedItemSave;
  let addInput = $("#add-item-input").val();
  //insert new clone of item if we have an input value:
  if (addInput != "") {
    clonedItem.html($("input").val()).appendTo("#my-ul-list");
  }
}
// scope to the UL since any might be removed later per question statement
// gave the ul an id so we can target it specifically
$myList.on('click', '.item', function(event) {
    // delegateTarget is the UL here
    let $items = $(event.delegateTarget).find('li');
    $items.filter('.selected').not(this).removeClass('selected');
    $selected = $items.filter('.selected').not(this).removeClass('selected');
    $selected = $('.selected');
    if (!!$selected.length) {
      $selected.toggleClass("selected")
    } else {
      $(this).addClass('selected');
    }
  })
  // handle the remove
  .on('remove-selected', function() {
    $(this).find('.selected').remove();
  });
$('#add-button').on('click', newElement);
$('#remove-selected').on('click', function(even) {
  //trigger the remove
  $myList.trigger('remove-selected');
});

.selected {
  background-color: #ffff00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="header">
  <input type="text" id="add-item-input" placeholder="...">
  <button type="button" class="addBtn" id="add-button">Add</button>
</div>

<ul id="my-ul-list" class="nyList">
  <li class="item">blank 1</li>
  <li class="item">blank 2</li>
  <li class="item">blank 3</li>
</ul>
<button type="button" id="remove-selected">Remove Selected</button>