Question

我似乎无法弄明白当我在第一个div上时，如何简单地隐藏“prev”按钮，当我在最后一个div时隐藏“next”按钮

希望那里有一位专业人士想要帮助他们。这是我的代码：

<!DOCTYPE html>
<html>
<head>
  <style>
      div { width:40px; height:40px; margin:10px; float:left; border:2px blue solid; padding:2px; }
      span { font-size:14px; }
      p { clear:left; margin:10px; }
  </style>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div></div>
  <div></div>
  <div></div>
  <div id="start"></div>
  <div></div>
  <p><button id="prev">Prev</button></p>
  <p><button id="next">Next</button></p>
    <script type="text/javascript">
        var $curr = $("#start");
        $curr.css("background", "#f99");
        $("#prev").click(function () {
            $curr = $curr.prev();
            $("div").css("background", "");
            $curr.css("background", "#f99");
        });
        var $curr = $("#start");
        $curr.css("background", "#f99");
        $("#next").click(function () {
            $curr = $curr.next();
            $("div").css("background", "");
            $curr.css("background", "#f99");
        });
    </script>
</body>
</html>

Answer 1

我对你的标记进行了一些修改，这反映了这类问题的传统方法。

<div class="boxes">
    <div>F</div>
    <div>E</div>
    <div>W</div>
    <div class="active">L</div>
    <div>X</div>
</div>
<p><button id="prev">Prev</button></p>
<p><button id="next">Next</button></p>

请注意我们所有.boxes元素周围的容器div。另请注意，我们不再使用id，而是使用跟踪当前位置的班级（.active）。

// When the #prev or #next buttons within a p are clicked
$("p").on("click", "#prev, #next", function(e){
    // Find reference to current active element, and remove class
    var active = $(".active").removeClass("active");
    // If we have an active element
    active.length
        // Determine direction of action 
        ? $(this).prop("id") === "prev"
              // If the #prev button was clicked, move back a sibling
              ? active.prev().addClass("active")
              // If the #next button was clicked, move forward a sibling
              : active.next().addClass("active")
        // No active element? Set the first child as active
        : $(".boxes :first-child").addClass("active");  
    // Show or hide #prev and #next based on active element location
    $("#prev").toggle( !$(".active").is(":first-child") );
    $("#next").toggle( !$(".active").is(":last-child") );
// Trigger this on load to setup active element if not already present
}).find("#prev").trigger("click");

小提琴：http://jsfiddle.net/txpj2/2/

Answer 2

使用jQuery隐藏使用以下语法的元素：

$("#prev").hide();

这会隐藏上一页按钮。

Answer 3

var $curr = $("#start");
$curr.css("background", "#f99");
$("#prev").click(function () {
    $("#next").show();
    $curr = $curr.prev('div');
    $("div").css("background", "");
    $curr.css("background", "#f99");
    if (!$curr.prev('div').length) $(this).hide();
 });
 $("#next").click(function () {
    $("#prev").show();
    $curr = $curr.next('div');
    $("div").css("background", "");
    $curr.css("background", "#f99");
    if (!$curr.next('div').length) $(this).hide();
 });

FIDDLE

Answer 4

我建议在第一个div和最后一个div中添加一个ID，以防你的索引号发生变化，因为你已经添加或删除了div

见变更

  <div id="first"></div>
  <div></div>
  <div></div>
  <div id="start"></div>
  <div id="last"></div>

这是完整的工作

<!DOCTYPE html>
<html>
<head>
  <style>
      div { width:40px; height:40px; margin:10px; float:left; border:2px blue solid; padding:2px; }
      span { font-size:14px; }
      p { clear:left; margin:10px; }
  </style>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div id="first"></div>
  <div></div>
  <div></div>
  <div id="start"></div>
  <div id="last"></div>
  <p><button id="prev">Prev</button></p>
  <p><button id="next">Next</button></p>
    <script type="text/javascript">
        var $curr = $("#start");
        $curr.css("background", "#f99");
        $("#prev").click(function () {
                $("#next").show();
                $curr = $curr.prev();
                $("div").css("background", "");
                $curr.css("background", "#f99");
            if ($curr.attr("id")) == "first") {
                $(this).hide();
            }
        });
        $("#next").click(function () {
            $("#prev").show();
            $curr = $curr.next();
            $("div").css("background", "");
            $curr.css("background", "#f99");
            if ($curr.attr("id") == "last") {
                $(this).hide();
            }

        });
    </script>
</body>
</html>

Answer 5

请参阅下面的jsfiddle和代码以及正确的答案，其他答案并不完整。此版本将确保无论容器中有多少div，prev / next按钮都将被正确隐藏。

var updateButtons = function() {
    var $curr = $(".current");

    if ($curr.prev().length > 0)
        $("#prev").show();
    else
        $("#prev").hide();

    if ($curr.next().length > 0)
        $("#next").show();
    else
        $("#next").hide();
};

var $curr = $("#start");
$curr.css("background", "#f99");
$("#prev").click(function () {
    $curr.removeClass("current");
    $curr = $curr.prev();
    $("div").css("background", "");
    $curr.css("background", "#f99");
    $curr.addClass("current");
    updateButtons();
});
var $curr = $("#start");
$curr.css("background", "#f99");
$("#next").click(function () {
    $curr.removeClass("current");
    $curr = $curr.next();
    $("div").css("background", "");
    $curr.css("background", "#f99");
    $curr.addClass("current");
    updateButtons();
});

updateButtons();

http://jsfiddle.net/rFs7Q/1/

Answer 6

jsBin demo

var curr = 3;  // SET DESIRED START N (Remember: zero based)
var divN = $('div').length;

function doit(){
  $('div').eq(curr % divN).css("background", "#f99").siblings('div').css("background", "#fff");
}doit();

$("#prev, #next").click(function (e) {
 var set = this.id === 'prev' ? curr-- : curr++ ;
  doit();
});

jquery if语句隐藏元素

6 个答案:

jsBin demo