Question

我正在点击游戏。在这个游戏中，角色之间会有一些对话。我想要一个jQuery函数，单击Next按钮将显示正确的对话幻灯片。点击游戏中的研究人员将触发第一张幻灯片 - 研究员单词。

订单：

researcherWords1
noniWords1
researcherWords2
noniWords2
researcherWords3
noniWords3
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负责 where 以显示我假设的内容类似于speechbubbles;此代码只显示/隐藏div的一个时间。）

单击一个按钮更改div

1 个答案: