点击时jQuery动态隐藏/显示div的内容答案

【问题标题】：jQuery Dynamic hide/show content of div on click点击时jQuery动态隐藏/显示div的内容
【发布时间】：2021-03-29 13:50:06
【问题描述】：

我有 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() {
    });
});

知道如何让它更有活力吗？

【问题讨论】：

<a href="#" class="link" data-banner-target="#banner1">...</a> banner。然后点击.link，隐藏所有id不等于data('banner-target')的.banner，然后显示等于的.banner。
你可以使用切换吗？

标签： javascript jquery dynamic hide show

【解决方案1】：

您可以为此使用attribute selector...

^= 的意思是“开始于”。

注意在 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>

简而言之...有很多方法可以做到... ;)

【讨论】：