如何在列表中保持一行活動（一次）？ - Javascript

Question

我遇到的問題是，我希望用戶只能點擊特定行，而無需激活多行的oppertuinity。

如果用戶點擊row1，那麼我希望這一行是活動的。如果他然後點擊第2行，則活動狀態從第1行變爲第2行。

$(function() { 

     $('body').on('click', '.list-group .list-group-item', function() { 
      $(this).toggleClass('active'); 
     }); 

     $('[name="SearchDualList"]').keyup(function (e) { 
      var code = e.keyCode || e.which; 
      if (code == '9') return; 
      if (code == '27') $(this).val(null); 
      var $rows = $(this).closest('.dual-list').find('.list-group li'); 
      var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase(); 
      $rows.show().filter(function() { 
       var text = $(this).text().replace(/\s+/g, ' ').toLowerCase(); 
       return !~text.indexOf(val); 
      }).hide(); 
     }); 

    }); 

Answer 1

與表的一個例子：

$(document).on('click', 'tr', function() { 
 
    $('tr').removeClass('active'); 
 
    $(this).addClass('active'); 
 
});

table { 
 
    table-layout:fixed; 
 
    width: 100%; 
 
    border-collapse: collapse; 
 
} 
 
td { 
 
    padding: 10px; 
 
    border: 1px solid #d8d8d8; 
 
} 
 
tr.active { background-color: #f1f1f1 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table> 
 
    <tbody> 
 
    <tr><td>one</td></tr> 
 
    <tr><td>two</td></tr> 
 
    <tr><td>three</td></tr> 
 
    <tr><td>four</td></tr> 
 
    </tbody> 
 
</table>

Answer 2

你可以從先前選定的行切換類：

$('body').on('click', '.list-group .list-group-item', function() { 
    $('.active').toggleClass('active'); 
    $(this).toggleClass('active'); 
}); 

Answer 3

您可以添加的東西清除了所有其他行，如果你泄露了你的HTML結構

$('.list-group .list-group-item').removeClass('active'); 

更高效的代碼可能可用。單擊處理程序

Answer 4

使用.each()功能，反覆項目，並找到最後點擊的一個，所以你toggeling這個類的新的被點擊之前，從中取出active類

$('body').on('click', '.list-group .list-group-item', function (event) { 
    var parent = $(this).parents('.list-group'), 
     children = parent.find('.list-group-item'); 
    children.each(function (index) { 
     if ($(this).hasClass('active')) $(this).removeClass('active'); 
    }); 
    $(this).addClass('active') 
}); 

Fiddle