与我的fiddle ,我让它在加载时突出显示主菜单按钮之一,并在底部设置相应的按钮。
我认为错误但无法弄清楚自己是在我的 switch 语句中执行 $this 变量的引用范围的事情。就我而言, $this 指向单击的按钮值,我认为该值是类的名称,但在我的 switch 语句中,我不确定是否可以引用 $this 中的 id 名称。我想我的问题是 $this 在我的场景中具有什么值(value)?
很高兴看到一个工作示例,可能需要更少的代码,因为我可以看到许多可以简化的重复项。
$('.menu').click(function () {
if ($(this) != $('.highlight')) {
$(this).addClass('highlight')
.siblings('.menu')
.removeClass('highlight');
}
switch ($this) {
case '#dateMenu':
$('.date-chart').show();
$('.jc-chart').hide();
$('.jp-chart').hide();
$('.ws-chart').hide();
break;
case '#jcMenu':
$('.date-chart').hide();
$('.jc-chart').show();
$('.jp-chart').hide();
$('.ws-chart').hide();
break;
case '#jpMenu':
$('.date-chart').hide();
$('.jc-chart').hide();
$('.jp-chart').show();
$('.ws-chart').hide();
break;
case '#wsMenu':
$('.date-chart').hide();
$('.jc-chart').hide();
$('.jp-chart').hide();
$('.ws-chart').show();
break;
}
});
最佳答案
$this
应该是 $(this)
...这是对当前元素的引用...因为您正在检查 id。使用 prop()
。
switch ($(this).prop('id')) { or switch (this.id) { ...
并从案例中删除#
试试这个
$('.menu').click(function () {
if (!$(this).hasClass('.highlight'))) {
$(this).addClass('highlight')
.siblings('.menu')
.removeClass('highlight');
}
switch ($(this).prop('id')) {
case 'dateMenu':
$('.date-chart').show();
$('.jc-chart').hide();
$('.jp-chart').hide();
$('.ws-chart').hide();
break;
case 'jcMenu':
$('.date-chart').hide();
$('.jc-chart').show();
$('.jp-chart').hide();
$('.ws-chart').hide();
break;
case 'jpMenu':
$('.date-chart').hide();
$('.jc-chart').hide();
$('.jp-chart').show();
$('.ws-chart').hide();
break;
case 'wsMenu':
$('.date-chart').hide();
$('.jc-chart').hide();
$('.jp-chart').hide();
$('.ws-chart').show();
break;
}
});
已更新
为了减少代码...您可以使用siblings()。
switch ($(this).prop('id')) {
case 'dateMenu':
$('.date-chart').show().siblings().hide();
break;
case 'jcMenu':
$('.jc-chart').show().siblings().hide();
break;
case 'jpMenu':
$('.jp-chart').show().siblings().hide();
break;
case 'wsMenu':
$('.ws-chart').show().siblings().hide();
break;
}
关于jQuery - 单击按钮时触发 show(),hide(),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17646915/