1

我需要一个特定的 div 仅在选择特定项目时显示。

这是我到目前为止的进展：进展

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

欢迎所有建议！

4

6 回答 6

3

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

喜欢这个小提琴。

使用的代码：

if ($(this).data('target') == "2") {
    $("#div5").show();
} else {
    $("#div5").hide();
}
于 2012-08-23T23:51:13.090 回答
3

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

演示

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;
}
于 2012-08-24T00:00:01.237 回答
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);
});

小提琴

于 2012-08-24T00:06:24.227 回答
2

你可以通过点击操作来显示 div5

这是 jsfiddle演示

于 2012-08-23T23:52:22.320 回答
2

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

于 2012-08-23T23:52:42.113 回答
2

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

于 2012-08-23T23:53:07.150 回答