多个超链接点击射击jQuery的功能

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，比如“可切换”，而不是那些没有“空间”一词的tr。这需要很多时间，逻辑将更容易遵循。

$(".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(); 
    } 
});