如何创建一个更优雅的实现
我为我的学生做了一个界面，他们点击一个图像并听到通过文本到语音的描述，文本描述出现在div中。
目前，我从图像中调用文本，因为演讲的onclick事件只有在div上才能工作，而且由于它是(这个)事件，所以我不知道如何将两者结合起来。
首先，是否有可能，或者说“更好”--只需一次单击div就可以触发这两个函数，而不是像我所做的那样在div和映像之间分割它们？这是我唯一能想出办法让这一切发挥作用的方法。所以这是第一件事。
第二，我每次都会重述这个代码
jQuery(this).articulate('speak')" data-articulate-append=我怎样才能使这更经济呢？在现实中，我有数百个项目，在jQuery和数据清晰之间还有更多的设置。我为这篇文章缩短了它，但实际上它要长得多，重复了数百次。
最后，是否可以从TTS命令的innerHTML部分提取data-articulate-append内容，因为在每种情况下都是相同的？
非常感谢，我花了相当长的时间来构建我对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>回答 1
Stack Overflow用户
发布于 2020-07-30 21:36:26
您可以通过以下方式实现这一点：
给每个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"));
});
});https://stackoverflow.com/questions/63181646
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号