3

最初のdivにいるときに「前へ」ボタンを非表示にし、最後の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></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

jQueryで要素を非表示にするには、次の構文を使用します。

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

これにより、 [前へ]ボタンが非表示になります。

于 2012-05-20T23:30:56.460 に答える
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

divを追加または削除したためにインデックス番号が変更された場合に備えて、最初のdivと最後のdivにIDを追加することをお勧めします。

変化を見る

  <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の数に関係なく、前へ/次へのボタンが適切に非表示になります。

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 に答える