製作單個選項選擇/取消選擇列表

我想列出一些元素，您只能選擇一個選項並取消選擇此選項並查看原始元素列表。我希望能夠選擇其他元素，而不先取消當前選定的選項。我希望這一切都有道理。製作單個選項選擇/取消選擇列表

HTML

<ul id="mylist"> 
    <li>Element 1</li> 
    <li>Element 2</li> 
    <li>Element 3</li> 
    <li>Element 4</li> 
    <li>Element 5</li> 
    <li>Element 6</li> 
</ul>

jQuery的

$('#mylist').on('click', 'li', function() { 
    $('#mylist li').removeClass('selected'); 
    $('#mylist li').addClass('not-selected'); 
    $(this).removeClass('not-selected'); 
    $(this).addClass('selected'); 
    $(this).click(function() { 
     $('#mylist li').removeClass('selected'); 
     $('#mylist li').removeClass('not-selected'); 
    }); 
});

CSS

ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 

ul li { 
    float: left; 
    display inline-block; 
    width: 100px; 
    height: 100px; 
    border: 1px solid black; 
    margin: 0 10px 10px 0px; 
} 

ul li.selected { 
    background-color: #f535d7; 
} 

ul li.not-selected { 
    background-color: #bbb; 
    opacity: .2; 
}

這是多遠我得到：http://jsfiddle.net/vaidasb/rMRgF/5/

來源

2013-10-31 Vaidas

你的JavaScript改成這樣：

$('#mylist').on('click', 'li', function() { 
    if ($(this).hasClass('selected')) 
    { 
     $(this).removeClass('selected'); 
     $('#mylist li').removeClass('not-selected');   
    } 
    else 
    { 
     $('#mylist li').removeClass('selected').addClass('not-selected'); 
     $(this).removeClass('not-selected').addClass('selected'); 
    } 
});

來源

2013-10-31 15:22:14

對於很多事情jQuery的，你可以在一行中做到這一點。

$('#mylist').on('click', 'li', function() { 
    $(this).toggleClass('selected').siblings().removeClass('selected'); 
});

我建議不要使用不同的not-selected CSS類。「未選擇」是默認設置。

這使JavaScript和CSS代碼更簡單，並避免了「三態」情況，其中第三種狀態是既不是selected也不是not-selected的元素。

如果您不希望「選定」狀態可以切換，請使用.addClass()而不是.toggleClass()。

http://jsfiddle.net/Aa2NW/

來源

2013-10-31 15:29:50 Tomalak

都會響起@Tim我想這是你想要儘可能多選擇：http://jsfiddle.net/Dcwc5/

更改你的JavaScript像這樣：

$('#mylist').on('click', 'li', function() { 

    if ($(this).hasClass('selected')) 
    { 
     //clicked element was previously selected 
     //remove his selected status 
     $(this).removeClass('selected').addClass('not-selected'); 
     //check if other's are selected 
     if($('#mylist li.selected').length == 0){ 
      $('#mylist li').removeClass('not-selected'); 
     } 
    } 
    else if ($(this).hasClass('not-selected')){ 
     $(this).removeClass('not-selected').addClass('selected'); 
    } 
    else 
    { 
     //elementw as newly selected 
     //all li's remove selected, add not-selected 
     $('#mylist li').removeClass('selected').addClass('not-selected'); 

     //remove not-selected from current element and add selected 
     $(this).removeClass('not-selected').addClass('selected'); 
    } 
});

來源

2013-10-31 15:35:36 Gobo

製作單個選項選擇/取消選擇列表

回答

相關問題