单击另一个列表项时取消选择列表项

Question

我希望能够在单击另一个列表项时取消select 一个列表项，同时我希望能够select 同一个列表项select 标签的工作方式，即单击并按住多个列表项以及 shift 单击。

目前，我已经设置好了，因此我可以 select 列表项并更改属性值和背景颜色。

Javascript:

function selectLi(el)
{
  if ($(el).css( "background-color" )=="rgb(204, 204, 204)")
  {
    $(el).css( "background-color", "white");
    $(el).attr('selected',false);
  } 
  else 
  {
    $(el).css("background-color", "#ccc");
    $(el).attr('selected',true);
  }
}

我的列表项正在自动生成：

$('#unorderedRight').append('<li value="' + $(this).val() + '" onclick="selectLi(this)" selected=false><input type="checkbox" id="'+ $(this).text()+'_checkbox">'+$(this).text()+'</li>');

目前，如果 select 编辑了一个列表项，而用户 select 编辑了另一个列表项，则第一个 select 编辑的列表项不是未selected（正如此代码所预期的那样）。我不确定从哪里开始这个

Answer 1

答案是遍历无序列表中的所有元素，其中它们的 selected 属性 = selected 并检查以确保您当前正在查看的元素与您刚刚单击的元素不同。

function selectLi(el)
    {
      console.log("addtoright");
      if ($(el).css( "background-color" )=="rgb(204, 204, 204)"){
        $(el).css( "background-color", "white");
        $(el).attr('selected',false);
      } 
      else {
        $(el).css("background-color", "#ccc");
        $(el).attr('selected',true);
        $("#unorderedRight li").each(function(i, obj)
        {
          if($(obj).attr('selected') == 'selected' && obj !== el)
          {
          $(obj).attr('selected', false);
          $(obj).css( "background-color", "white");
          }
        });
      }
    }

单击另一个列表项时取消选择列表项

Unselect list item when another list item is clicked

javascript

html-lists

listitem