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

Question

我希望能够在单击另一个列表项时取消选择一个列表项，同时我希望能够以与选择标签相同的方式选择多个列表项，即单击并按住多个列表项目以及移位点击。

目前，我已经设置好它，以便我可以选择一个列表项并更改属性值和背景颜色。

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>');

目前，如果选择了一个列表项，并且用户选择了另一个列表项，则第一个选择的列表项不会被取消选择（正如此代码所预期的那样）。我不确定从哪里开始

标签： javascripthtml-listslistitem

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");
          }
        });
      }
    }