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

  • Z时代
  • 2024-01-10
  • 分类：问答

我遇到的问题是，我希望用户只能点击特定行，而无需激活多行的oppertuinity。如何在列表中保持一行活动（一次）？ - Javascript

如果用户点击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(); 
     }); 
    });

回答：

与表的一个例子：

$(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>

回答：

你可以从先前选定的行切换类：

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

回答：

您可以添加的东西清除了所有其他行，如果你泄露了你的HTML结构

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

更高效的代码可能可用。单击处理程序

回答：

使用.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

以上是 如何在列表中保持一行活动（一次）？ - Javascript 的全部内容， 来源链接： utcz.com/qa/258292.html

回到顶部