Translate javascript function into JQuery

Question

I have the following function which I have used for hiding and showing respective pages based on different button clicks. Now I am using JQuery and I want to be able to do the same thing but just with JQuery. There must be something wrong the way I am translating it cause it doesn't work.

function showPages() {

    var aBtnShowPages = document.getElementsByClassName("btnShowPage");
    // this is an array
    for (var i = 0; i < aBtnShowPages.length; i++) {

        aBtnShowPages[i].addEventListener("click", function () {
            //console.log( "WORKS" ); 
            // Hide the pages
            var aPages = document.getElementsByClassName("page");
            for (var j = 0; j < aPages.length; j++) {
                aPages[j].style.display = "none";
            }

            var sDataAttribute = this.getAttribute("data-showThisPage");
            //console.log( sDataAttribute );
            document.getElementById(sDataAttribute).style.display = "flex";
        });

    }

}

JQuery version:

  function showPages() {

        let $aBtnShowPages = $(".btnShowPage");
        // this is an array
        for (let i = 0; i < $aBtnShowPages.length; i++) {

            $aBtnShowPages[i].click(function () {

                //console.log("WORKS");
                // Hide the pages
                let $aPages = $('.page');
                for (let j = 0; j < $aPages.length; j++) {
                    $aPages[j].hide();
                }

                let $sDataAttribute = $(this).attr("data-showThisPage");
                //console.log( $sDataAttribute );
                $(sDataAttribute).show();
            });

        }

    }

You can find the appropriate methods to use in the api.jquery.com or learn.jquery.com. `$()` and `on()` and `css()` and `attr()` or `prop()` to name a few. — Taplar, Apr 25 '18 at 17:15
look this https://www.w3schools.com/jquery/jquery_hide_show.asp — Diego Avila, Apr 25 '18 at 17:18
There's no such thing as "just jQuery." jQuery is just a Javascript library; even your translated example has some Javascript in it. — Robert Harvey, Apr 25 '18 at 17:50
Possible duplicate of [array.eq() vs. array\[\] in Javascript and Jquery](https://stackoverflow.com/questions/34419756/array-eq-vs-array-in-javascript-and-jquery) — t.niese, Apr 25 '18 at 18:16
`$aPages[j]` returns a DOMElement and not a jQuery result set. And a DOMElement does not have a `hide` function. You need to use [`eq()`](https://api.jquery.com/eq/) — t.niese, Apr 25 '18 at 18:16

Mark Schultheiss · Answer 1 · 2018-04-25T19:04:37.103

This shows how to toggle between those with "false" and those with "true" values. Pretty verbose and could simply be one function using .toggle(true) instead.

I put some fake markup in place since you provided none.

$(function() {
  $(".btnShowPage").on("click", function() {
    let $aPages = $('.page');
    $aPages.hide();
    $aPages.filter(function() {
      return $(this).data("showThisPage") == true;
    }).show();
  }).trigger('click'); // set initial state ;
  $(".btnHidePage").on("click", function() {
    let $aPages = $('.page');
    $aPages.show();
    $aPages.filter(function() {
      return $(this).data("showThisPage") == true;
    }).hide();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="page" data-show-this-page="true">showme1</div>
<div class="page" data-show-this-page="true">showme2</div>
<div class="page" data-show-this-page="true">showme3</div>
<div class="page" data-show-this-page="false">showme4</div>
<div class="page" data-show-this-page="true">showme5</div>
<div class="page" data-show-this-page="true">showme6</div>
<button id="showem" class="btnShowPage" type="button">showem</button>
<button id="hideem" class="btnHidePage" type="button">hideem</button>

Just show those with true set.

$(function() {
  $(".btnShowPage").on("click", function() {
    // just show those with true set
    $('.page').each(function(index) {
      let showme = $(this).data("showThisPage") == true;
      $(this).toggle(showme);
    });
  }).trigger('click'); // set initial state ;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="page" data-show-this-page="true">showme1</div>
<div class="page" data-show-this-page="true">showme2</div>
<div class="page" data-show-this-page="true">showme3</div>
<div class="page" data-show-this-page="false">showme4</div>
<div class="page" data-show-this-page="true">showme5</div>
<div class="page" data-show-this-page="true">showme6</div>
<button id="showem" class="btnShowPage" type="button">showem</button>

Show just a targeted element and hiding/showing all:

$(function() {
  $(".btnShowPage").on("click", function() {
    // just show those with the target
    let showTarget = $(this).data("target");
    switch (showTarget) {
      case -1:
        $('.page').hide();
        break;
      case "all":
        $('.page').show();
        break;
      default:
        $('.page').eq(showTarget).toggle(true);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="page">showme0</div>
<div class="page">showme1</div>
<div class="page">showme2</div>
<div class="page">showme3</div>
<div class="page">showme4</div>
<div class="page">showme5</div>
<div class="page">showme6</div>
<button id="showem" class="btnShowPage" type="button" data-target="all">showem all</button>
<button id="showem" class="btnShowPage" type="button" data-target="1">showem 1</button>
<button id="showem" class="btnShowPage" type="button" data-target="2">showem 2</button>
<button id="showem" class="btnShowPage" type="button" data-target="5">showem 5</button>
<button id="showem" class="btnShowPage" type="button" data-target="-1">hide all</button>

Translate javascript function into JQuery

1 Answers1