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

I need a specific div to only show when a specific item is selected.

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

Here is my progress so far: Progress

这是我迄今取得的进展：进展

You will see in HTML comments that div5 needs to show if option 2 is selected however, on default div5 will be set to display none.

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

All suggestions welcome!

欢迎所有建议！

6 个解决方案

#1

Couldn't you just add a conditional to check if data-target='2' is selected, then reveal #div5, otherwise hide it?

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

Like this fiddle.

喜欢这个小提琴。

Code used:

使用的代码：

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

#2

With .toggle() you can specify a boolean to showOrHide, so you could modify the code with the following to simplify the showing and hiding and cater for the special condition.

使用.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;
}

#3

All you need is :

所有你需要的是 ：

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

and it looks like this:

它看起来像这样：

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

FIDDLE

小提琴

#4

you can do it by using on click action to show div5

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

this is jsfiddle Demo

这是jsfiddle Demo

#5

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

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

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

$(target).show();

With this modification we're able to specify dependent comma separated divs like 1,2,3

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

#6

Another option is to use a class to hide / show items. Say you have the class .displayNone, and all divs start with that class, then you only need to remove it for the selected div.

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