javascript - 将javascript函数翻译成JQuery
问题描述
我有以下功能,用于根据不同的按钮点击隐藏和显示相应的页面。现在我正在使用 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”值之间切换。非常冗长,可能只是一个使用的函数.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>
推荐阅读
- javascript - 外部脚本添加到窗口,但在 Angular 应用程序中未定义添加的功能
- html - 遍历项目列表,在悬停时显示分配的图像
- android - Android SQLite 数据库导入记录
- javascript - 未找到 Razor 页面文本自动完成错误 404
- python-requests - 如何修复 Python 3 中的 [Errno 11004] get addrinfo failed 错误
- excel - Excel 没有运行任何带有 .Autofilter 的代码。它似乎也没有正确记录宏
- android - RecyclerView.ViewHolder 中的 FragmentTranscation
- maven - Docker Compose 找不到 Maven pom
- firebase - Firebase Google 登录返回 403 需要 OAuth 同意
- c# - 无法从视图中访问控制器