Question

重要的HTML

 <div class="input-group">
     <input type="text" id="q" class="form-control" placeholder="Search for User">
           <span class="input-group-btn">
                  <button class="btn btn-default" id="user_search" type="button"><i id="usersearchicon" class="fa fa-search"></i></button>
            </span>
 </div>
 <div id="user_results">
 </div>

加载的用户结果Html

<table class="table" id="user_result_table">
    <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email</th>
    </tr>
    <tr class="tr_content">
        <td>first_name1</td>
        <td>last_name1</td>
        <td>email1</td>
        <td style="display:none;" class="result_user_id">1</td>
    </tr>
    <tr class="tr_content">
        <td>first_name2</td>
        <td>last_name2</td>
        <td>email2</td>
        <td style="display:none;" class="result_user_id">2</td>
    </tr>
</table>

jQuery代码

<script type="text/javascript">
$(function(){
    $("#user_search").click(function(){
        var q = $("#q").val().split(/[ ,]+/).join(',');
        $("#user_results").load("{% url 'search' %}?q=" + q, function(){
            $(":not(.selected) #user_result_table tr.tr_content ").click(function(){
                $(this).toggleClass( "selected" );
                var selected_user = $(this).find(".result_user_id").html();
                $("#user_result_table tr.tr_content").not(".selected").hide();
                });
        });
     });
});

$(document).ajaxStart(function() {
    $("#usersearchicon").replaceWith("<i id='usersearchicon' class='fa fa-spinner fa-spin'></i>");
});

$(document).ajaxStop(function() {
    $("#usersearchicon").replaceWith("<i id='usersearchicon' class='fa fa-search'></i>");
});

我想将查询中的用户结果加载到html中，当用户选择一行时，隐藏其他行。这是有效的，但如果我然后选择未隐藏的结果行，它就会消失，即使它现在有一个归属于它的“选定”类。如果行具有归属于它的选定类，如何停止注册。我认为选择器：not（.selected）会有效吗？有任何想法吗。我以为我可能与这篇文章jQuery Event after changing class with toggleClass有关，但无法将这些建议用于我的代码。

Answer 1

当事件绑定

时，您会产生误解

将单击处理程序附加到不具有类.selected的表行的代码只能运行一次，并且在加载后这是直接的。正如您在注释中提到的，如果没有加载的表行具有选定的类，那么该行中的选择器没有任何意义：

$(":not(.selected) #user_result_table tr.tr_content ").click(function(){

因为没有行在运行时（即在加载后立即）具有所选的类。

现在第一次单击一行时，一切都很好，它将隐藏所有其他行，并向刚刚单击的行添加一个类。如果再次单击该行，将运行相同的函数，然后.toggleClass将删除.selected类，然后由于它不再具有.selected类，它将会是隐藏。

所以，如果你想忽略那些有一个＆＃39; .selected＆＃39;在功能中这样做：

//No point in the :not(.selected) here so removed)
 $("#user_result_table tr.tr_content ").click(function(){
    if (!$(this).hasClass('selected')) //If this doesn't have .selected
    {
         $(this).addClass( "selected" );
         var selected_user = $(this).find(".result_user_id").html();
         $("#user_result_table tr.tr_content").not(".selected").hide();
    }
 });

现在最好只设一个只运行一次的点击处理程序，所以试试jQuery .one()，这意味着点击处理程序只执行一次，即

 $("#user_result_table tr.tr_content ").one('click',function(){
     $(this).toggleClass("selected");
     var selected_user = $(this).find(".result_user_id").html();
     $("#user_result_table tr.tr_content").not(".selected").hide();
 });

这可能更接近你所追求的目标？

您链接的文章是关于事件委托的，原则与您遇到的问题类似。关键是事件绑定发生时。您的方法与将事件绑定到永不更改的类（.tr_content）并不意味着您没有删除该类的方法完全相同。您的处理程序在单击它们时会针对所有.tr_content运行，无论它们是否有任何其他类（即，无论它们是否具有.selected）。在文章中，他有两个单击处理程序，第一个是代码运行时页面上的元素，第二个是代码运行时不在页面上的元素。为此，您必须将事件委托给页面上的元素（即元素的父元素，代码运行时在页面上）。根据答案，最终的父母当然是文件。

Jquery隐藏已从URL加载的表中的未选择行。

1 个答案: