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

这显示了如何在＆＃34; false＆＃34;之间进行切换。以及＆＃34; true＆＃34;值。非常详细，可以简单地使用.toggle(true)代替一个函数。

我放了一些假标记，因为你没有提供。

＆＃13;

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

＆＃13;

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

＆＃13;

只显示那些有真实设置的人。

＆＃13;

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

＆＃13;

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

＆＃13;

仅显示目标元素并隐藏/显示所有内容：

＆＃13;

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

＆＃13;

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

＆＃13;

将javascript函数转换为JQuery

1 个答案: