避免写这么多的优雅方式(点击隐藏显示)

Question

im 寻找一种优雅的方式来避免编写太多代码来执行点击、显示点击、隐藏其他代码。

这是我使用的代码：

.html：

<p align="center" style="font-size: 22px;">
<span class="badge badge-secondary" id="yesterday"><a href="#" style="color: inherit;">Yesterday</a></span>
<span class="badge badge-dark" id="today"><a href="#" style="color: inherit;">Today</a></span>
<span class="badge badge-secondary" id="tomorrow"><a href="#" style="color: inherit;">Tomorrow</a></span>
</p>

jquery：

$('#yesterday').click(function(e) {
e.preventDefault();
$(this).addClass('badge-dark').removeClass('badge-secondary');
$('#today,#tomorrow').addClass('badge-secondary').removeClass('badge-dark');
$('.yesterday').slideDown('slow');
$('.today,.tomorrow').slideUp('1000');
});
$('#today').click(function(e) {
e.preventDefault();
$(this).addClass('badge-dark').removeClass('badge-secondary');
$('#yesterday,#tomorrow').addClass('badge-secondary').removeClass('badge-dark');
$('.today').slideDown('slow');
$('.yesterday,.tomorrow').slideUp('1000');
});
$('#tomorrow').click(function(e) {
e.preventDefault();
$(this).addClass('badge-dark').removeClass('badge-secondary');
$('#yesterday,#today').addClass('badge-secondary').removeClass('badge-dark');
$('.tomorrow').slideDown('slow');
$('.yesterday,.today').slideUp('1000');
});

Answer 1

为此：

1. 对这三个元素使用类(例如，show-hide(
2. 在.yesterday、.today和.tomorrow元素(例如，slide-target(上使用类。
3. 在类上使用单个click处理程序
4. 在处理程序中，this是要显示的元素，其同级元素(请参阅siblings(是要隐藏的元素
5. 在处理程序中，$('.slide-target')是所有目标，则可以使用.filter('.' + this.id)仅针对此元素的目标，.not('.' + this.id)定位其他元素

所以粗略地说：

<p align="center" style="font-size: 22px;">
<span class="show-hide badge badge-secondary"><a href="#" style="color: inherit;">Yesterday</a></span>
<span class="show-hide badge badge-dark"><a href="#" style="color: inherit;">Today</a></span>
<span class="show-hide badge badge-secondary"><a href="#" style="color: inherit;">Tomorrow</a></span>
</p>

和

$('.show-hide').click(function(e) {
e.preventDefault();
// Just to avoid doing it repeatedly
var $this = $(this);
// Add this class
$this.addClass('badge-dark').removeClass('badge-secondary');
// Remove it from siblings
$this.siblings().addClass('badge-secondary').removeClass('badge-dark');
// Find the target elements
$('.slide-target')
.filter('.' + this.id).slideDown('1000').end() // Slide down related
.not('.' + this.id).slideUp('1000')            // Slide up others
// Slide down the relevant element(s)
});

Answer 2

简单提取公共逻辑以分离功能：

function updateClasses(element, selector) {
element.addClass('badge-dark').removeClass('badge-secondary');
$(selector).addClass('badge-secondary').removeClass('badge-dark').slideUp('1000');
}
$('#yesterday').click(function (e) {
e.preventDefault();
updateClasses(this, '#today,#tomorrow');
$('.yesterday').slideDown('slow');
});
$('#today').click(function (e) {
e.preventDefault();
updateClasses(this, '#yesterday,#tomorrow');
$('.today').slideDown('slow');
});
$('#tomorrow').click(function (e) {
e.preventDefault();
updateClasses(this, '#yesterday,#today');
$('.tomorrow').slideDown('slow');
});

Answer 3

像这样：

$('#yesterday, #today, #tommorow').click(function(e) {
e.preventDefault(); 
$(this).addClass('badge-dark').removeClass('badge-secondary');
if ( $(this).is("#yesterday") ) {
$('#today,#tomorrow').addClass('badge-secondary').removeClass('badge-dark');
$('.yesterday').slideDown('slow');
$('.today,.tomorrow').slideUp('1000');
} else if ( $(this).is("#today") ) {
$('#yesterday,#tomorrow').addClass('badge-secondary').removeClass('badge-dark');
$('.today').slideDown('slow');
$('.yesterday,.tomorrow').slideUp('1000');
} else if ( $(this).is("#tomorrow") ) {
$('#yesterday,#today').addClass('badge-secondary').removeClass('badge-dark');
$('.tomorrow').slideDown('slow');
$('.yesterday,.today').slideUp('1000');
}
});

Answer 4

我想不出更简单的方法：

• 使用类badge作为.click()函数的选择器。
• 使用$(this)更改单击元素上的类，$('.badge').not($(this))定位所有其他元素。
• 根据您单击的元素获取要显示的类名。
• 与点 #2 执行相同的操作以显示/隐藏所需的元素。

这是一个工作片段，我在其中添加了一些样式：

$('.badge').click(function(e) {
e.preventDefault();
$('.badge').not($(this)).removeClass('badge-dark').addClass('badge-secondary'); // Resets all except…
$(this).removeClass('badge-secondary').addClass('badge-dark');                  // … the one clicked
var classToShow = '.' + $(this).attr('id');                                     // Get this id
$('.days').not(classToShow).slideUp('1000');                                    // Hide all except…
$(classToShow).slideDown('slow');                                               // … the one wanted
});

p {
font-size: 22px;
}
.badge-secondary {
opacity: 0.5;
}
.badge a {
color: inherit;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p align="center">
<span class="badge badge-secondary" id="yesterday"><a href="#">Yesterday</a></span>
<span class="badge badge-dark" id="today"><a href="#">Today</a></span>
<span class="badge badge-secondary" id="tomorrow"><a href="#">Tomorrow</a></span>
</p>
<p class="days yesterday">Yesterday…</p>
<p class="days today">Today…</p>
<p class="days tomorrow">Tomorrow…</p>

希望对您有所帮助！