Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/image/5.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
将javascript函数转换为JQuery_Javascript_Jquery - Fatal编程技术网

将javascript函数转换为JQuery

将javascript函数转换为JQuery,javascript,jquery,Javascript,Jquery,我有下面的功能,我用它来隐藏和显示基于不同按钮点击的相应页面。现在我正在使用JQuery,我希望能够做同样的事情,但只是使用JQuery。我翻译它的方式一定有问题,因为它不起作用 function showPages() { var aBtnShowPages = document.getElementsByClassName("btnShowPage"); // this is an array for (var i = 0; i < aBtnShowPages

我有下面的功能,我用它来隐藏和显示基于不同按钮点击的相应页面。现在我正在使用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();
            });

        }

    }

这显示了如何在具有false值的值和具有true值的值之间切换。非常详细,可能只是一个使用.toggletrue的函数

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

$function{ $.btnShowPage.onclick,函数{ 设$aPages=$”.page'; $aPages.hide; $aPages.filterfunction{ 返回$this.datashowThisPage==true; }.表演; }.trigger'click';//设置初始状态; $.btnHidePage.onclick,函数{ 设$aPages=$”.page'; $aPages.show; $aPages.filterfunction{ 返回$this.datashowThisPage==true; }.隐藏; }; }; showme1 showme2 showme3 showme4 showme5 showme6 肖厄姆
hideemYou可以在api.jquery.com或learn.jquery.com中找到适当的方法使用。$还有css和attr或prop等等。看看我试过的这个,看起来还好吗?请参阅上面我的编辑。没有jQuery这样的东西。jQuery只是一个Javascript库;甚至你翻译的例子中也有一些Javascript。我意识到了。