3

我似乎无法弄清楚当我在第一个 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>
4

6 回答 6

2

我对您的标记做了一些修改，它反映了解决此类问题的传统方法。

<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/

于 2012-05-20T23:50:53.037 回答
1 
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();
 });

小提琴

于 2012-05-20T23:37:36.440 回答
1

要使用 jQuery 隐藏元素，请使用以下语法：

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

这将隐藏Prev按钮。

于 2012-05-20T23:30:56.460 回答
1

我建议在第一个 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>​​​​​​​​​​​
于 2012-05-20T23:46:25.997 回答
0

请参阅下面的 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/

于 2012-05-20T23:41:32.087 回答
0

jsBin 演示

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();
});
于 2012-05-20T23:54:27.560 回答