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
– Taplar, Commented Apr 25, 2018 at 17:15
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
– Robert Harvey, Commented Apr 25, 2018 at 17:50

Mark Schultheiss · Accepted Answer · 2018-04-25 19:04:37Z

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>

Collectives™ on Stack Overflow

Translate javascript function into JQuery

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related