Geek asks and answers

Jquery if statement to hide elements

I can’t understand how easy it is to hide the "prev" button when I am on the first div and hide the "next" button when I am on the last div .

Hopefully there will be a professional who would like to help newb. Here is my code:

<!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>
+3
source share
6 answers
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

+1
source

I made a small modification to your markup that reflects the usual approach to this type of problem.

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

Pay attention to the container .boxesaround all of our items div. Also, note that we are no longer using it id, but rather a class ( .active) that will track our current location.

// 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");

Fiddle: http://jsfiddle.net/txpj2/2/

+2

jQuery :

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

Prev.

+1

I suggest adding an identifier to the very first div and the very last div just in case your index numbers change because you added or removed divs

see change

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

Everything works here

<!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>​​​​​​​​​​​
+1
source

See jsfiddle and the code below with the correct answer, other answers are not so complete. This version will ensure that no matter how many divs are inside the container, the prev / next buttons will be hidden properly.

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/

0
source

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();
});
0
source

More articles:


All Articles