Question

我有一个表，我需要显示和隐藏最多9个tr的表，每组3个。我循环通过一个tr 9次以生成所有9. .hide工作，但.show确实并且jquery没有中途破坏（我已经将alert（）全部放在代码中，甚至使用alert（）来显示我想要显示或隐藏的参与者，并且值是正确的。

这是创建tr的

的片段

<cfloop index="i" from="1" to="9" step="1">


        <tbody id="attendeeRow<cfoutput>#i#</cfoutput>">
        <tr>
          <td colspan="2" bgcolor="#693505">
            <table width="600" border="0" align="center" cellpadding="4" cellspacing="0">
                <tr>
                  <td colspan="2">&nbsp;</td>
                </tr>
                <tr>
                  <td width="185" align="right">*Attendee <cfoutput>#i#</cfoutput> Name<br /></td>
                  <td><span id="sprytextfield100<cfoutput>#i#</cfoutput>">
                    <input name="attendeeName<cfoutput>#i#</cfoutput>" type="text" class="form" size="35" value="" />
                    <span class="textfieldRequiredMsg"></span></span></td>
                </tr>
                <tr>
                  <td align="right">*Attendee <cfoutput>#i#</cfoutput> Title<br /></td>
                  <td><span id="sprytextfield101<cfoutput>#i#</cfoutput>">
                    <input name="attendeeTitle<cfoutput>#i#</cfoutput>" type="text" class="form" size="35" value="" />
                    <span class="textfieldRequiredMsg"></span></span></td>
                </tr>
                 <tr>
                  <td align="right">*Attendee <cfoutput>#i#</cfoutput> Company</td>
                  <td><span id="sprytextfield102<cfoutput>#i#</cfoutput>">
                    <input name="attendeeCompany<cfoutput>#i#</cfoutput>" type="text" class="form" size="35" value="" />
                    <span class="textfieldRequiredMsg"></span></span></td>
                </tr>
                <tr>
                  <td align="right">*Attendee <cfoutput>#i#</cfoutput> Email</td>
                  <td><span id="sprytextfield103<cfoutput>#i#</cfoutput>">
                  <input name="attendeeEmail<cfoutput>#i#</cfoutput>" type="text" class="form" size="35" value="" />
                  <span class="textfieldRequiredMsg"></span><span class="textfieldInvalidFormatMsg"></span></span></td>
                </tr>

            </table>
          </td>
        </tr>
        </tbody>
        </cfloop>

        <!---- comment: this bottom part is what allows the user to show or hide the elements, I just use the div with an id="counter" to keep track of where I am.--->
        <tr>
            <td colspan="2" align="center" bgcolor="#693505" class="form">
                <div id="counter" style="visibility:hidden;">0</div>
                <div id="additional3">[+] Click here to register an additional 3 attendees</div>
                <div id="subtract3">[+] Click here to remove the last 3 attendees</div>
            </td>
        </tr>

这是jquery;

$(document).ready(function () {

for (loopIndex = 1; loopIndex <= 9; loopIndex++)
{

    var currentRow = "attendeeRow" + loopIndex;

    var currentName = "attendeeName" + loopIndex;
    var currentTitle = "attendeeTitle" + loopIndex;
    var currentCompany = "attendeeCompany" + loopIndex;
    var currentEmail = "attendeeEmail" + loopIndex;



    $("#"+currentRow).hide();

    $("#"+currentName).val("--");
    $("#"+currentTitle).val("--");
    $("#"+currentCompany).val("--");
    $("#"+currentEmail).val("a@b.c");

}


$("#subtract3").hide(); 
$("#additional3").show();

$("#additional3").live("click", function(e) {

    e.preventDefault();

    var start = $("#counter").text(); 
    var increment = "3";
    var end = parseInt(start) + parseInt(increment); 


    for (loopIndex = start; loopIndex <= end; loopIndex++)
    {
        var currentRow = "attendeeRow" + loopIndex;

        var currentName = "attendeeName" + loopIndex;
        var currentTitle = "attendeeTitle" + loopIndex;
        var currentCompany = "attendeeCompany" + loopIndex;
        var currentEmail = "attendeeEmail" + loopIndex;

        alert("#"+currentRow);
        $("#currentRow").show();

        $("#"+currentName).val("");

        $("#"+currentTitle).val("");

        $("#"+currentCompany).val("");
        $("#"+currentEmail).val("");

    }
    $("#counter").text(end);
    if(start >= 6){
        $("#additional3").hide();

    }
    if(start >= 3){
        $("#subtract3").show();

    }

});

$("#subtract3").live("click", function(e) {

    e.preventDefault();

    var end = $("#counter").text(); 
    var increment = "3";
    var start = parseInt(start) - parseInt(increment); 


    for (loopIndex = start; loopIndex <= end; loopIndex++)
    {
        var currentRow = "attendeeRow" + loopIndex;

        var currentName = "attendeeName" + loopIndex;
        var currentTitle = "attendeeTitle" + loopIndex;
        var currentCompany = "attendeeCompany" + loopIndex;
        var currentEmail = "attendeeEmail" + loopIndex;



        $("#"+currentRow).hide();

        $("#"+currentName).val("--");
        $("#"+currentTitle).val("--");
        $("#"+currentCompany).val("--");
        $("#"+currentEmail).val("a@b.c");

    }
    $("#counter").text(start);


    if(start >= 6){
        $("#additional3").hide();

    }
    if(start >= 3){
        $("#subtract3").show();
    }

});
});

Answer 1

我假设这个......

alert("#"+currentRow);
$("#currentRow").show();

就是这个......

alert("#" + currentRow);
$("#" + currentRow).show();

您正在警告连接，但没有对DOM选择进行连接。

Answer 2

在#subtract3点击事件中，您有一个复制粘贴错误。

var start = parseInt(start) - parseInt(increment);

应该是

var start = parseInt(end) - parseInt(increment);

此外，您可以使用.click()代替.live("click"，因为您没有替换这些元素。

jQuery .hide工作，但.show没有

2 个答案: