Question

尝试动态设置<li>的点击listerner时遇到了一些麻烦。这是填充列表的代码：

for(var i = 0; i < chatlist.length; i++){
        $('<li class="contact"><div class="wrap"><div class="meta"><p class="name">' + contact + '</p><p class="preview">' + preview + '</p></div></div></li>').appendTo($('#contacts ul'));
    }

在所选行的点击侦听器上：

    $('#contacts').on('click', 'li', function() {
        var index = $(this).index();
        console.log(index);
   });

我正在使用this template。选择行后，我想将选定的<li>标记设置为

<li class = 'contact active'></li>

我设法获取所选的行索引，但我不确定如何为选定的<li>设置HTML类。有什么想法吗？

Answer 1

尝试添加活动类的代码，并添加css以检查不同

＆＃13;

 $(document).ready(function(){
        $('.list li').click(function() {
             $( '.list li' ).removeClass( "active" ); // remove active class from all li 
            $(this).addClass('active'); // add active class for click li
        });
    });

＆＃13;

.active {
color:red;
}
   li {
   cursor: pointer;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list">
            <li>Test 1</li>
            <li>Test 2</li>
            <li>Test 3</li>
            <li>Test 4</li>
            <li>Test 5</li>
            <li>Test 6 </li>
            <li>Test 7</li>
        </ul>

＆＃13;

Answer 2

我设法得到选定的行索引，但我不知道如何设置选定<li>的HTML类。有什么想法吗？

您可以addClass活动本身click

$('#contacts').on('click', 'li', function() {
    $( "#contacts li" ).removeClass( "active" ); //assuming that it has to be removed from other li's, else remove this line
    $( this ).addClass( "active" );
});

Answer 3

在点击事件处理程序中，$(this)将指向已点击的li元素。所以你应该能够像这样分配一个类：

$('#contacts').on('click', 'li', function() {
  $(this).addClass("selected"); // Assign the class here
  var index = $(this).index();
  console.log(index);
});

Answer 4

您可以添加jquery逻辑，以便从active id li内删除contacts类，然后将active类添加到{已点击的{1}}您可以从li的{{1}}获取，如：

index

或使用li代替。请查看附带的代码段。

＆＃13;

var clickedLi = $('#contacts ul li')[index];

＆＃13;

$(this)

＆＃13;

var chatlist = new Array(3);
var contact = 'contact';
var preview = 'preview';
for(var i = 0; i < chatlist.length; i++){
    $('<li class="contact"><div class="wrap"><div class="meta"><p class="name">' + contact + '</p><p class="preview">' + preview + '</p></div></div></li>').appendTo($('#contacts ul'));
}

$('#contacts').on('click', 'li', function() {
    var index = $(this).index();
     $('#contacts ul li').each(function(){
       $(this).removeClass('active');
     });
    
    $(this).addClass('active');
    
});

＆＃13;

Answer 5

您可以像这样添加活动类：

$(this).addClass('active');

动态地将类设置为选定的<li>标记

5 个答案: