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

Есть идеи, как сделать его более динамичным?

<a href = "#" class = "link" data-banner-target = "#banner1">...</a> <= Дайте всем вашим ссылкам общий класс. Присвойте всем своим баннерам класс banner. Затем, нажав .link, скройте все .banner, чей идентификатор не равен data('banner-target'), а затем покажите тот, который равен.

— 19.12.2020 00:04

Можете ли вы использовать переключатель?

— 19.12.2020 00:35

javascript jquery dynamic hide show

18.12.2020 23:57

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

200

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете использовать селектор атрибутов для этого...

Где ^= означает «начинается с».

Обратите внимание, что его можно использовать в 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>

Короче... Есть много способов сделать это... ;)

19.12.2020 00:58