Question

我正在制作HTML的视觉小说，这些是我现在的HTML和JS代码。

HTML：

<table border="1">
    <tr><td width="650px" align = "justify"><p id = "firstp"></p></td></tr>
    <tr><td width="650px" align = "justify"><p id = "secondp"></p></td></tr>
</table>
<embed src="assets/Haze.mp3" hidden="true" autostart="true" loop="true"></embed>

JS：

    var i = 0;
    document.addEventListener("click", function(){
            if (i==1) { document.getElementById("secondp").innerHTML = "First Paragraph."; i=2;}
            if (i==0) { document.getElementById("firstp").innerHTML = "Second Paragraph."; i=1;}
        });

我的问题：

是否可以在不使用.innerHTML？

根据代码，当用户点击他/她的鼠标时，段落将逐一显示。有效。但是，我想要的不是在JS方面编写段落，是否可以在<p>和</p>标签之间编写它并使用脚本来简单地显示文本？所以，HTML现在应该是这样的：

<table border="1">
    <tr><td width="650px" align = "justify"><p id = "firstp">First Paragraph</p></td></tr>
    <tr><td width="650px" align = "justify"><p id = "secondp">Second Paragraph</p></td></tr>
</table>

当用户点击他/她的鼠标时，JS应该如何改变，以便它仍然可以逐个显示段落？

如何应用＃1方法显示其他元素（即按钮，链接，图片）？

它与数字1相同，但是当用户点击他/她的鼠标时，它将显示按钮/链接/图片而不是段落。我不是指onclick事件。我仍指的是EventListener。

如何在点击鼠标时更改背景音乐（embed）？或者即使播放器/用户进入下一个场景（意味着不同的HTML），也能保持播放音乐？

我想把音乐放在iframe之外只是为了循环播放音乐。但我认为这样做会没用，因为如果在下一个场景中，我想使用不同的背景音乐。或者iframe中的HTML是否可以触发并更改iframe之外播放的音乐？

Answer 1

尝试使用JQuery，还添加一些类名（例如class1）然后加载下面的脚本

$(document).ready(function(){
    $('.class1').hide();
    $('.class1').click(function(){
        $(this).hide();
    });
    $('.class2').click(function(){
        $(this).next().toggle();
    });
});

这是demo

Answer 2

尝试使用此：已编辑

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table border="1">
    <tr><td width="650px" align = "justify"><p id = "firstp">First Paragraph</p></td></tr>
    <tr><td width="650px" align = "justify"><p id = "secondp">Second Paragraph</p></td></tr>
</table>


<div id="music">
    <embed type="audio/mpeg" src="#" name="plugin" height="100%" width="100%" id="mplayer">
</div>  
<script>
$(document).ready(function(){
    $("#firstp").hide();
    $("#secondp").hide();
    var i = 0;
var songs = [];
songs[0] = "/XXXX/../assets/Hangover - DownloadMing.SE.mp3";// full path to your songs if the are not in current directory
songs[1] = "/XXXX/../assets/Tu Hi Tu - DownloadMing.SE.mp3";
    document.addEventListener("click", function(){
        if (i==1) { $("#secondp").show();}
        if (i==0) { $("#firstp").show(); i = 1;}
  $('#mplayer').attr('src',songs[j%2]);
j++;
    });

  });  
  </script>

注意：对于按钮，您也可以在页面上创建它们，并使用按钮ID隐藏它们并在clickEventListener上显示它们。

使用Javascript ADDEventListener显示元素

2 个答案: