javascript - 两个不同的链接显示/隐藏具有两个 ID 的 div。如何？

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