2

我为我的学生制作了一个界面，他们在其中单击图像并通过文本转语音听到描述，文本描述出现在 div 中。

目前我正在从图像中调用文本，因为onclick语音事件仅在它位于 div 上时才有效，并且由于它是一个（this）事件，我不明白如何将两者结合起来。

首先，是否有可能或“更好” - 单击 div 触发这两个功能，而不是像我所做的那样在 div 和图像之间拆分它们？这是我能弄清楚如何让它全部工作的唯一方法。所以这是第一件事。

其次，我每次都重述这段代码

jQuery(this).articulate('speak')" data-articulate-append=

我怎样才能使这个更经济？实际上，我有数百个项目，并且在 jQuery 和 data-articulate 之间还有很多设置。我已经为这篇文章缩短了它，但实际上它更长并且重复了数百次。

最后，是否可以innerHTML从data-articulate-appendTTS 命令的部分绘制内容，因为它在每种情况下都是相同的？

非常感谢，到目前为止，我已经花了很长时间来构建我所拥有的东西，因为我是 JS 的新手。我正在学习，我已经尝试自己回答这些问题，但这还不属于我的技能范围，如果我没有在我的帖子中使用所有正确的术语，我很抱歉。我在这里包含了该页面的精简版本，其中仅包含必需品。非常感谢任何输入。

<!doctype html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
        <script src="http://www.clients.brettcolephotography.com/test/jquery-3.1.1.min.js"></script>
        <script src="http://www.clients.brettcolephotography.com/test/articulate.min.js"></script>
        <link href="http://www.clients.brettcolephotography.com/test/style.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div>
<div onclick="jQuery(this).articulate('speak')" data-articulate-append="elephant">
<img onclick="elephant()" src="http://www.clients.brettcolephotography.com/test/01.jpg">
</div>
<div onclick="jQuery(this).articulate('speak')" data-articulate-append="camel">
<img onclick="camel()"  src="http://www.clients.brettcolephotography.com/test/02.jpg">
</div>
<div onclick="jQuery(this).articulate('speak')" data-articulate-append="bear">
<img onclick="bear()"  src="http://www.clients.brettcolephotography.com/test/03.jpg">
</div>
        </div>
        <div id="word">
        </div>
        <script>
            function elephant() {
                document.getElementById("word").innerHTML ="elephant";
        }
            function camel() {
                document.getElementById("word").innerHTML ="camel";
        }
            function bear() {
                document.getElementById("word").innerHTML ="bear";
        }
        </script>
    </body>
</html>
4

1 回答 1

0

您可以通过以下方式完成此操作：

给每个 div 一个类，例如它的speak. 然后为speak元素添加一个事件监听器。然后在那个事件监听器中，你可以运行多个函数。您还可以摆脱图像的 onclick 处理程序。

<div class="speak" data-articulate-append="elephant"><img src="http://www.clients.brettcolephotography.com/test/01.jpg"></div>
<div class="speak" data-articulate-append="camel"><img src="http://www.clients.brettcolephotography.com/test/02.jpg"></div>
<div class="speak" data-articulate-append="bear"><img src="http://www.clients.brettcolephotography.com/test/03.jpg"></div>  
      

$(document).ready(function(){
    $(".speak").on("click",function(){
        $(this).articulate('speak');
        $("#word").html($(this).data("articulate-append"));
    });
});
于 2020-07-30T21:36:26.810 回答