Изменить divs, нажав на одной кнопке

Question

Я делаю точку и выбираю игру. В этой игре будет разговор между персонажами. Мне нужна функция jQuery, где при нажатии кнопки «Далее» отображается правильный слайд слайда. Щелчок исследователя в игре вызовет первый слайд - исследовательWords1.

Заказ:

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

Так просто скрывая все дивы, кроме "текущий" один, который определяется путем увеличения index до вашего массива div.

(Я предполагаю, что ваш CSS берет на себя где для отображения того, что я предполагаю, что будет что-то вроде speechbubbles, этот код просто показывает/скрывает div сек по одному.)