CODEWITHSUNDEEP
jquery
Yamada Akira
Yamada Akira

Reputation: 87

Change divs by clicking on one button

I am making a point and click game. In this game there will be some conversation between characters. I would like a jQuery function where clicking on the Next button will show the right conversation slide. Clicking the researcher in game will trigger the first slide - researcherWords1.

Order:

  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;
}

Upvotes: 1

Views: 58

Answers (1)

Amos M. Carpenter
Amos M. Carpenter

Reputation: 4958

A simple approach could look something like this:

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();
});

So just hiding all divs except the "current" one, which is determined by increasing the index to your array of divs.

(I'm assuming your CSS takes care of where to display what I'm assuming will be something like speechbubbles; this code just shows/hides the divs one at a time.)

Upvotes: 1

Related Questions