Question

我需要一个特定的div才能显示选择特定项目的时间。

到目前为止，我的进展如下：Progress

您将在HTML注释中看到div5需要显示是否选择了选项2，但默认情况下div5将设置为显示无。

欢迎所有建议！

Answer 1

你难道不能只是添加一个条件来检查是否选择data-target='2'，然后显示#div5，否则隐藏它？

使用的代码：

if ($(this).data('target') == "2") {
    $("#div5").show();
} else {
    $("#div5").hide();
}

Answer 2

使用.toggle()，您可以为showOrHide指定一个布尔值，因此您可以使用以下内容修改代码，以简化显示和隐藏，并满足特殊条件。

Demo

的JavaScript

var $options = $('.showSingle');
var $targets = $('.targetDiv');

$('.showSingle').on('click', function () {
    $options.removeClass('selected');
    $targets.hide();

    $(this).addClass('selected');
    $('#div' + $(this).data('target')).show();

    $('#div5').toggle($(this).data('target') === 2);
});

$('.showSingle').first().click();

CSS

.targetDiv, #div5 {
    dislpay: none;
}

Answer 3

您只需要：

$("#div5").toggle($(this).data('target')==2);

它看起来像这样：

$('.showSingle').on('click', function () {
    $(this).addClass('selected').siblings().removeClass('selected');
    $('.targetDiv').hide();
    $('#div' + $(this).data('target')).show();
    $("#div5").toggle($(this).data('target')==2);
});

FIDDLE

Answer 4

您可以使用点击操作来显示div5

这是jsfiddle Demo

Answer 5

http://jsfiddle.net/zerkms/SRQTv/1/

var target = $(this).data('target')
                    .toString()
                    .split(',')
                    .map(function(i) { return '#div' + i; })
                    .join(', ');

$(target).show();

通过此修改，我们可以指定依赖逗号分隔的div，如1,2,3

Answer 6

另一种选择是使用类来隐藏/显示项目。假设您有类.displayNone，并且所有div都以该类开头，那么您只需要为选定的div删除它。

如果选择了项目，则显示特定项目| jQuery的

6 个答案:

的JavaScript

CSS