JQuery選擇串列項-有解無憂

單擊后，我想從串列中選擇一個專案；我試過添加類和類似的東西，但點擊事件似乎無法識別串列項，這些專案也需要以后能夠被洗掉，所以我認為給它們類是這種情況下的最佳選擇，這是我的代碼：

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>

uj5u.com熱心網友回復：

如果我理解你的問題，下一個<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');
});

uj5u.com熱心網友回復：

如果您的問題是如何動態添加串列項并為單擊它們分配一個 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>

uj5u.com熱心網友回復：

你的問題關于“選擇”有點不清楚所以我只是假設你想對選定的元素做一些事情 - 比如洗掉它；所以我添加了該功能的示例。

關于代碼的一些評論

不需要將 append 放在檔案就緒事件處理程式中
使用了錯誤的類 Item vs item
當我們從這里開始使用時，我克隆了第一個，以防所有li被洗掉，否則當您“添加”以允許更多模塊化代碼時，我克隆第一個 - 就像如果你最終有更多的“內部”li像一個跨度或一些這樣的 - “修改它”比“用復雜的標記添加在那里創建它更容易”。
使用 '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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/381010.html

標籤：javascript html 查询

上一篇：當一個表單被更新（使用Ajax）時，重新加載表單使它們與之前更新的表單具有相同的值

下一篇：選中單選按鈕時更改父div的背景