触发 jQuery 函数需要多次点击超链接答案

【问题标题】：Multiple hyperlink clicks required to fire jQuery function触发 jQuery 函数需要多次点击超链接
【发布时间】：2017-01-01 23:34:09
【问题描述】：

JQuery 代码

 $(".riskInformationButton").bind("click", function(e){
         var toggler = $(this).parent().parent().next();
         var className = $(toggler).attr("class");

         while(className.indexOf("space") == -1){
            toggler.addClass("visible");

            if(toggler.hasClass("visible") && toggler.hasClass("hidden"))
            {
                toggler.removeClass("hidden");
            }
            else if (toggler.hasClass("visible"))
            {
                toggler.removeClass("visible");
                toggler.addClass("hidden");
            }

            toggler = toggler.next();
            className = $(toggler).attr("class");

            if(!className)
            {
                break;
            }
         }
    });

HTML 代码

<tr class="spacerRow"></tr>
<tr id="point202" class="riskManagementRow">
<td class="rmRisk">
<a id="ctl00_ContentPlaceHolderMain_planRisk202_riskInformationButton202" class="riskInformationButton" name="PlanRisk202">
Student Drug Abuse
<span class="rmRiskCategory">(Schools)</span>
</a>
</td>
<td class="rmFrequency">
<select id="ctl00_ContentPlaceHolderMain_planRisk202_riskFrequencyDropDown202" class="riskFrequencyDropDown" onchange="updateRiskFrequencyOfPointOnMap('riskFrequencyDropDown202');" name="ctl00$ContentPlaceHolderMain$planRisk202$riskFrequencyDropDown202">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7" selected="selected">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</td>
<td class="multiply">
<span class="multiply">x</span>
</td>
<td class="rmSeverity">
<select id="ctl00_ContentPlaceHolderMain_planRisk202_riskSeverityDropDown202" class="riskSeverityDropDown" onchange="updateRiskSeverityOfPointOnMap('riskSeverityDropDown202');" name="ctl00$ContentPlaceHolderMain$planRisk202$riskSeverityDropDown202">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6" selected="selected">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</td>
<td class="equals">
</td>
<td class="rmRiskFactor">
</td>
<td class="rmPercentComplete">0%</td>
<td class="rmDeletePlan">
</td>
</tr>
<tr class="rmPlanSolutionRow hiddenOnLoad"></tr>
<tr class="rmPlanSolutionRow hiddenOnLoad"></tr>

<tr class="spacerRow">

...代码以这种模式继续。

我试图在单击 riskInformationButton 时显示隐藏的行。我遇到的问题是，有时需要多次点击超链接才能显示隐藏的行。

任何帮助将不胜感激。

【问题讨论】：

什么包含隐藏和可见的类？

标签： jquery html-table

【解决方案1】：

我建议您搜索具有特定类别的 tr，例如“toggleable”，而不是其中没有“space”一词的 tr。这需要很多时间，而且逻辑会更容易理解。

    $(".riskInformationButton").bind("click", function(e){

         $("toggleable").each( function {

            toggler.toggleClass("hidden");
            toggler.toggleClass("visible");

     });
});

大致了解您可能会得到什么。我明白你在最后期限，这可能不是绝对最快的解决方案：D

【讨论】：

【解决方案2】：

总结代码，看到需要在课堂“spacerRow”结束。代码可能是这样的：

$(".riskInformationButton").bind("click", function(e){

     e.stopPropagation();

     var toggler = $(this).parent().parent().next();
     while(!toggler.hasClass("spacerRow")){
        toggler = toggler
                    .toggleClass("hidden")
                    .toggleClass("visible")
                    .next();
     }
});

【讨论】：