Question

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时显示隐藏的行。我遇到的问题是，有时需要多次点击超链接点击才能显示隐藏的行。

非常感谢任何帮助。

Answer 1

我建议你搜索具有某个类的tr，比如“toggleable”，而不是那些没有“space”字样的类。这需要花费很多时间，逻辑将更容易理解。

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

         $("toggleable").each( function {

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

     });
});

粗略了解您可能获得的内容。我确实理解你是在截止日期，这可能不是绝对最快的解决方案：D

Answer 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();
     }
});

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

2 个答案: