如何在 jquery 中的最后一个 div 内容之后隐藏下一个按钮答案

【问题标题】：How do I hide the next button after the last div content in jquery如何在 jquery 中的最后一个 div 内容之后隐藏下一个按钮
【发布时间】：2013-04-01 05:58:20
【问题描述】：

我想要做的是加载页面，然后只显示下一个按钮，在我单击下一个之后，然后显示上一个和下一个按钮，然后继续浏览不同的 div，然后在你到达最后一个 div，隐藏下一个按钮，只显示上一个按钮。

Jquery 表单滑块脚本

<script>
$(document).ready(function () {
    var oldOption;
    var currentOption;
    var counter = 1;
    var maxThings = 4;
    $("#2").hide();
    $("#3").hide();
    $("#4").hide();
    $("#forward").click(function () {
        $("#1").hide();
        $("#2").hide();
        $("#3").hide();
        $("#4").hide();
        if (!(counter >= maxThings)) {
            counter++;
        }
        $("#" + counter).show();
    });

    $("#back").click(function () {
        $("#1").hide();
        $("#2").hide();
        $("#3").hide();
        $("#4").hide();
        if (!(counter <= 1)) {
            counter--;
        }
        $("#" + counter).show();
    });
});
</script>

计算脚本

<script>
function calculate() {
    var total = (parseInt($('#studenttut option:selected').val()) + parseInt($('#campusrb>option:selected').val())) * parseInt($('#yearsatten>option:selected').val());
    $("#total").text(total);
}
</script>

HTML

<form>
<div id="1">
<table width="100%">
<tr>
    <td>Are you an In-State-Student?</td>
    <td align="right">
        <select id="studenttut">
            <option value="<?php echo $NIST; ?>">Yes $<?php echo $IST;  ?></option>
            <option value="<?php echo $NOST; ?>">No $<?php echo $OST; ?></option>
        </select>
    </td>
</tr>
</table>
</div>

<div id="2">
<table width="100%">
<tr>
    <td>Are you staying on campus?</td>
    <td align="right">
        <select id="campusrb">
            <option value="<?php echo $NBS; ?>">Yes $<?php echo $BS; ?>  </option>
            <option value="1">No $0</option>
        </select>
    </td>
</tr>
</table>
</div>

<div id="3">
<table width="100%">
<tr>
    <td>How many years are you planning to attend?</td>
    <td align="right">
        <select id="yearsatten">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="2">3</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
        </select>
    </td>
</tr>
</table>
</div>

<div id="4">
<div id="total"><input type="button" onClick="calculate()" value="calculate"/></div>
</form>

</div>
<button id="back">Back</button>
<button id="forward">Next</button>

【问题讨论】：

缩进。现在好热。

标签： html ajax jquery

【解决方案1】：

您要做的是单击#forward，显示'#back'，如果counter === maxThings 则隐藏#forward。点击#back，显示'#forward'，如果counter === minThings，则隐藏'#back'。

jsFiddle

$(document).ready(function () {
    var oldOption;
    var counter = 1;
    var maxThings = 4;
    var minThings = 1;
    $("#2").hide();
    $("#3").hide();
    $("#4").hide();
    $('#back').hide();

    $("#forward").click(function () {
        $("#1").hide();
        $("#2").hide();
        $("#3").hide();
        $("#4").hide();
        if (!(counter >= maxThings)) {
            counter++;
        }
        $("#" + counter).show();
        $('#back').show();
        if (counter === maxThings) {
            $('#forward').hide();
        }
    });

    $("#back").click(function () {
        $("#1").hide();
        $("#2").hide();
        $("#3").hide();
        $("#4").hide();
        if (!(counter <= 1)) {
            counter--;
        }
        $("#" + counter).show();
        $('#forward').show();
        if (counter === minThings) {
            $('#back').hide();
        }
    });
});

function calculate() {
    var total = (parseInt($('#studenttut option:selected').val()) + parseInt($('#campusrb>option:selected').val())) * parseInt($('#yearsatten>option:selected').val());
    $("#total").text(total);
}

【讨论】：

谢谢，这正是我所需要的

【解决方案2】：

您应该在第一页或最后一页处理后退和前进按钮的可见性

喜欢

if(counter==maxThings){
        $("#forward").hide();
    }

和

if(counter==1){
        $("#back").hide();
    }

也许像http://jsfiddle.net/UFCeX/这样的东西

希望有帮助

【讨论】：

【解决方案3】：

你可以试试这个：

$("#forward, #back").hide(); //<--hides both buttons

if($('form').find('div').first().is(':visible')){ //<---check the first of the div is visible
  $("#forward").show(); //<----if true then show the forward button
  $("#forward").click(function () {
     $("#back").show(); //<-----on click of the forward btn show the back button
     $("#1").hide();
     $("#2").hide();
     $("#3").hide();
     $("#4").hide();
     if (!(counter >= maxThings)) {
        counter++;
     }
     $("#" + counter).show();
     if($('form').find('div').last().is(':visible')){ //<---if last div in the form is visible then
       $(this).hide(); //<---hide the forward button
     }
  });
}
if($('form').find('div').last().is(':visible')){ //<---check the last of the div is visible
  $("#back").click(function () {
     $("#1").hide();
     $("#2").hide();
     $("#3").hide();
     $("#4").hide();
    if (!(counter <= 1)) {
        counter--;
    }
    $("#" + counter).show();
    if($('form').find('div').first().is(':visible')){ //<--if first div is visible then
       $(this).hide(); //<----hide the back button
    }
});

【讨论】：

谢谢，从第一条评论开始，现在已经完成了，但感谢您的时间，我感谢代码 cmets。 :)
这只是花了一点时间来完成，无论如何感谢您查看此内容。
是的，没问题，再次感谢，祝您编码愉快。