Question

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

目前，我已经对其进行了设置，以便可以选择一个列表项并更改属性值和背景色。

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

如果选择了一个列表项，而用户又选择了另一个列表项，则不会取消选择第一个选择的列表项（这是此代码所期望的）。我不确定从哪里开始

Answer 1

答案是遍历无序列表中所有选定属性= 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");
          }
        });
      }
    }

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

1 个答案: