Question

我有一系列问题，基于我正在展示/隐藏下一个问题的回答（有点像“创建自己的冒险故事”）。这是我的HTML：

<!-- TIER 3
================================================== -->
<!--From Steak/Fries-->
<div id="SteakFries" class="hide">
    <p>I'd rather...</p>
    <span class="responseRead"><img class="prompt" src="http://fakeimg.pl/50" data-respnseto="Read">Read a Best-Seller on the Beach</span>
    <span class="responseExplore"><img class="prompt" src="http://fakeimg.pl/50" data-respnseto="Explore">Explore Ancient Ruins &amp; Natural Wonders</span>
</div>

<!--From Chamagne/Caviar
To travel style-->

<!--From Gastro-->
<div id="GastroPubs" class="hide">
    <p>I'd rather...</p>
    <span class="responseExplore"><img class="prompt" src="http://fakeimg.pl/50" data-respnseto="Explore">Explore Ancient Ruins &amp; Natural Wonders</span>
    <span class="responseVisitCity"><img class="prompt" src="http://fakeimg.pl/50" data-respnseto="VisitCity">Visit City Landmarks &amp; Theatres</span>
</div>

<!--From Wine/Cheese-->
<div id="GastroPubs" class="hide">
    <p>I'd rather...</p>
    <span class="responseVisitCity"><img class="prompt" src="http://fakeimg.pl/50" data-respnseto="VisitCity">Visit City Landmarks &amp; Theatres</span>
    <span class="responseRelaxParadise"><img class="prompt" src="http://fakeimg.pl/50" data-respnseto="RelaxParadise">Relax in an Over-Water Bungalo in Paradise</span>
</div>

<!--opens these divs-->
<!-- TIER 4 (Styles Discover)
================================================== -->
<!--From VisitCity-->
<div id="VisitCity" class="culturalChameleon hide">
    Cultural Chameleon
</div>

<!--From Champagne/VisitCity-->
<div id="RelaxParadise" class="fiveStar hide">
    Five-Star Fanatic
</div>

<!--From Explore-->
<div id="Explore" class="activeAdventurer hide">
    Active Adventurer
</div>

<!--From Read/VisitCity-->
<div id="Read VisitCity" class="sunSeeker hide">
    Sun Seeker
</div>
<!--================================================== -->
</div>

因此，根据第3层中的链接 - 显示第4层中的相应div。

这是我的jQuery：

var data = "";
$('.prompt').click(function(){
    data = $(this).attr('data-respnseto');
    console.log(data);
    $('.hide').hide();

    $('#' + data).fadeIn(600);
});

它工作正常，直到我尝试显示第4层中的最后一项。看，它通过单击以下内容变为可见：

data-respnseto="Read"
data-respnseto="VisitCity"

第3层中的项目。但是，我这样做的方式 - 我只找一个ID。关于当用户点击第3层中的任何一个链接时如何在第4层中显示第4项的任何想法。

有道理吗？任何帮助将不胜感激。

Answer 1

试试这个：

var data = "";
$('.prompt').click(function(){
    data = $(this).data('respnseto');
    console.log(data);
    $('.hide').hide();

    $("div[id*='"+ data + "']").fadeIn(600);
});

<强> Check JSFiddle Demo

两个不同的链接显示/隐藏具有两个ID的div。怎么样？

1 个答案: