将javascript函数翻译成JQuery

Question

我有以下函数，用于根据不同的按钮点击隐藏和显示相应的页面。现在我正在使用 JQuery，我希望能够做同样的事情，但只是使用 JQuery。我翻译的方式一定有问题，因为它不起作用。

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 版本：

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

        }

    }

Answer 1

这显示了如何在“false”和“true”值之间切换。相当冗长，可能只是一个使用.toggle(true) 的函数。

由于您没有提供任何标记，因此我放置了一些虚假标记。

$(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>

只显示那些真正的集合。

$(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>

只显示一个目标元素并隐藏/显示全部：

$(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>