javascript - 点击时jQuery动态隐藏/显示div的内容
问题描述
我有 4 个不同内容的 div。每个 div 应根据您单击的链接更改其内容。
如果我有 10 个 div,我将不得不写 10 次:
$( "#banner2" ).hide()
$( "#banner3" ).hide();
$( "#banner4" ).hide();
$( "#link2" ).click(function() {
$( "#banner1, #banner3, #banner4" ).hide()
$( "#banner2" ).fadeIn( "slow", function() {
});
});
$( "#link1" ).click(function() {
$( "#banner2, #banner3, #banner4" ).hide();
$( "#banner1" ).fadeIn( "slow", function() {
});
});
$( "#link3" ).click(function() {
$( "#banner1, #banner2, #banner4" ).hide();
$( "#banner3" ).fadeIn( "slow", function() {
});
});
$( "#link4" ).click(function() {
$( "#banner1, #banner2, #banner3" ).hide();
$( "#banner4" ).fadeIn( "slow", function() {
});
});
知道如何使它更具活力吗?
解决方案
您可以为此使用属性选择器...
where^=
的意思是“开始于”。
请注意,可以在 JS 和 CSS 中使用。
$("[id^='link']").click(function(){
$("[id^='banner']").hide()
let num = this.id.replace("link","")
$("#banner"+num).fadeIn("slow")
})
[id^='link']{
text-decoration: none;
color: #dd4ed3;
font-size: 1.2em;
}
[id^='link']:after{
content: " | "
}
[id^='banner']{
display: none;
padding: 2em;
margin: 2em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<a href="#" id="link1">Banner #1</a>
<a href="#" id="link2">Banner #2</a>
<a href="#" id="link3">Banner #3</a>
<a href="#" id="link4">Banner #4</a>
<a href="#" id="link5">Banner #5</a>
<a href="#" id="link6">Banner #6</a>
<a href="#" id="link7">Banner #7</a>
<a href="#" id="link8">Banner #8</a>
<a href="#" id="link9">Banner #9</a>
<a href="#" id="link10">Banner #10</a>
</div>
<div id="banner1">Banner #1</div>
<div id="banner2">Banner #2</div>
<div id="banner3">Banner #3</div>
<div id="banner4">Banner #4</div>
<div id="banner5">Banner #5</div>
<div id="banner6">Banner #6</div>
<div id="banner7">Banner #7</div>
<div id="banner8">Banner #8</div>
<div id="banner9">Banner #9</div>
<div id="banner10">Banner #10</div>
在所有链接上使用通用类,就像 Taplar 建议的那样:
$(".bannerLink").click(function(){
$("[id^='banner']").hide()
let num = this.getAttribute("data-target")
$("#banner"+num).fadeIn("slow")
})
.bannerLink{
text-decoration: none;
color: #dd4ed3;
font-size: 1.2em;
}
.bannerLink:after{
content: " | "
}
[id^='banner']{
display: none;
padding: 2em;
margin: 2em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<a href="#" class="bannerLink" data-target="1">Banner #1</a>
<a href="#" class="bannerLink" data-target="2">Banner #2</a>
<a href="#" class="bannerLink" data-target="3">Banner #3</a>
<a href="#" class="bannerLink" data-target="4">Banner #4</a>
<a href="#" class="bannerLink" data-target="5">Banner #5</a>
<a href="#" class="bannerLink" data-target="6">Banner #6</a>
<a href="#" class="bannerLink" data-target="7">Banner #7</a>
<a href="#" class="bannerLink" data-target="8">Banner #8</a>
<a href="#" class="bannerLink" data-target="9">Banner #9</a>
<a href="#" class="bannerLink" data-target="10">Banner #10</a>
</div>
<div id="banner1">Banner #1</div>
<div id="banner2">Banner #2</div>
<div id="banner3">Banner #3</div>
<div id="banner4">Banner #4</div>
<div id="banner5">Banner #5</div>
<div id="banner6">Banner #6</div>
<div id="banner7">Banner #7</div>
<div id="banner8">Banner #8</div>
<div id="banner9">Banner #9</div>
<div id="banner10">Banner #10</div>
或更灵活地使用从.index()检索的子索引...
$(".bannerLink").click(function(){
$(".banner").hide()
let num = $(this).index()
$(".banner").eq(num).fadeIn("slow")
})
.bannerLink{
text-decoration: none;
color: #dd4ed3;
font-size: 1.2em;
}
.bannerLink:after{
content: " | "
}
.banner{
display: none;
padding: 2em;
margin: 2em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<a href="#" class="bannerLink">Banner #1</a>
<a href="#" class="bannerLink">Banner #2</a>
<a href="#" class="bannerLink">Banner #3</a>
<a href="#" class="bannerLink">Banner #4</a>
<a href="#" class="bannerLink">Banner #5</a>
<a href="#" class="bannerLink">Banner #6</a>
<a href="#" class="bannerLink">Banner #7</a>
<a href="#" class="bannerLink">Banner #8</a>
<a href="#" class="bannerLink">Banner #9</a>
<a href="#" class="bannerLink">Banner #10</a>
</div>
<div class="banner">Banner #1</div>
<div class="banner">Banner #2</div>
<div class="banner">Banner #3</div>
<div class="banner">Banner #4</div>
<div class="banner">Banner #5</div>
<div class="banner">Banner #6</div>
<div class="banner">Banner #7</div>
<div class="banner">Banner #8</div>
<div class="banner">Banner #9</div>
<div class="banner">Banner #10</div>
简而言之...有很多方法可以做到... ;)
推荐阅读
- htmlpurifier - 如何允许元素同时允许 HTMLPurifier 中的自定义属性?
- python - 根据条件将嵌套列表中的值替换为另一个嵌套列表的值
- aiml - AIML如何检查输入字符串是否与地图中的一个匹配
- python - 编写一个函数,返回存在的素数数量,包括给定数字
- python - 在没有图形溢出的情况下限制 mplot3d 表面上的轴?
- javascript - 居中溢出:DIV 内的自动内容
- c++ - 如何在 C++ 中获得(无序)集合差异或对称差异?
- ios - 当 @State var 基于 Picker 选择发生变化时,一个视图不会重新呈现
- java - 在尝试要求我的代码运行 ay/n while 循环时继续运行 int 错误
- c++ - 如何模拟类型为 std::unique_ptr 的返回值