1つのボタンをクリックしてdivを変更してください

Question

私はポイントアンドクリックゲームを作っています。このゲームでは、文字の間にいくつかの会話があります。次のボタンをクリックすると右の会話スライドが表示されるjQuery関数が欲しいです。 ゲームの研究者をクリックすると、最初のスライドが表示されます。researcherWords1。

注文：

1. researcherWords1
2. noniWords1
3. researcherWords2
4. noniWords2
5. researcherWords3
6. noniWords3
7. researcherWords4

HTML：

<div class="conversationWrapper"> 
    <div id="researcherConvo">Next</div> 

    <!-- CONVERSATION WITH THE RESEARCHER --> 
    <div class="researcherSays"> 
     <div class="researcherImage"></div> 
     <div class="researcherWords1 researcher"></div> 
     <div class="researcherWords2 researcher"></div> 
     <div class="researcherWords3 researcher"></div> 
     <div class="researcherWords4 researcher"></div> 
    </div> 

    <!-- NONIS REPLIES TO THE RESEARCHER --> 
    <div class="noniSays"> 
     <div class="noniImage"></div> 
     <div class="noniWords1"></div> 
     <div class="noniWords2"></div> 
     <div class="noniWords3"></div> 
    </div> 
</div> 

CSS：単純なアプローチは、このような何かを見ることができる

/* CONVERSATION BOXES */ 
.conversationWrapper{ 
    position:fixed; 
    width:1024px; 
    height:768px; 
    top:0; 
    left:0; 
    display:none; /* Ta bort vid doling */ 
} 
#researcherConvo{ 
    display:flex; 
    justify-content:center; 
    align-items:center; 
    width:200px; 
    height:50px; 
    background-color:purple; 
    position:absolute; 
    top:0; 
    right:0; 
    bottom:0; 
    left:0; 
    margin:auto; 
} 
.researcherSays, .noniSays{ 
    position:absolute; 
    height:150px; 
    width:600px; 
} 
.researcherSays{ 
    top:50px; 
    right:0; 
    left:0; 
    margin:0 auto; 
} 
.noniSays{ 
    bottom:50px; 
    right:0; 
    left:0; 
    margin:0 auto; 
} 
.researcherImage, .noniImage{ 
    background-color:#fff; 
    width:150px; 
    height:150px; 
    float:left; 
} 
.researcherWords1, .researcherWords2, .researcherWords3, .researcherWords4, 
.noniWords1, .noniWords2, .noniWords3{ 
    position:absolute; 
    background-color:#aaa; 
    width:450px; 
    height:150px; 
    right:0; 
    top:0; 
} 

Answer 1

：

var index = -1; 
var divs = ['researcherWords1', 'noniWords1', 'researcherWords2', 
    'noniWords2', 'researcherWords3', 'noniWords3', 'researcherWords4'] 
$('#researcherConvo').click(function() { 
    index++; 
    for (var i = 0; i < divs.length; i++) { 
    $('div.'+divs[i]).hide(); 
    } 
    $('div.'+divs[index]).show(); 
}); 

だから一つの "現在" を除くすべてのdivを隠し、 indexをdivの配列に増やして決定します。

（私はあなたのCSSを仮定していることは私がspeechbubblesのようなものだろうと仮定しているものを表示するの世話をする;このコードは単に/を一度にdiv秒1を隠して表示されます。）