[英]jQuery Dynamic hide/show content of div on click
I have 4 divs with different content.我有 4 个不同内容的 div。 Each div should change it's content depending on the link you click.
每个 div 应根据您单击的链接更改其内容。
If I have 10 divs I would have to write this 10 times:如果我有 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() {
});
});
Any idea of how to make it more dynamic?知道如何使它更具活力吗?
You can use attribute selector for this...您可以为此使用属性选择器...
Where ^=
means "starts with".其中
^=
表示“以”开头。
Notice that it is ok to use in JS ansd CSS.注意在 JS ansd 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>
Using a common class on all links, like Taplar advised:在所有链路上使用通用 class,就像 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>
Or more flexiblility using child index retreived from .index() ...或更灵活地使用从.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>
In short... There is many ways you can do it... ;)简而言之...有很多方法可以做到... ;)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.