JQuery select 列表项

Question

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

 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>必须得到选定的 class。

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

拳头添加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

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

 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

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

关于代码的一些评论

• 不需要将 append 放在文档就绪事件处理程序中
• 使用了错误的 class 项目与项目
• 当我们开始使用时，我克隆了第一个，以防所有li都被删除，否则我会在您“添加”时克隆第一个以允许更多模块化代码 - 就像您最终在您的li中添加更多“内部”一样span 或类似的东西——“修改它”比“用复杂的标记添加在那里创建它”更容易。
• 使用 'UL' 作为选择器通常不是一个好的选择，所以我给了ul一个 ID
• 缓存$myList以使新 ul id 的重构更容易
• 添加了一个按钮来触发删除选定的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>