时间戳

首页 > 解决方案 > 如何指定一个元素与另一个元素的关系，以便在该元素中编写 HTML 内容？

javascript - 如何指定一个元素与另一个元素的关系，以便在该元素中编写 HTML 内容？

问题描述

我试图让某些输出出现在网页上的特定位置。用户单击一个按钮 (id="start_button") 并开始执行语音识别的脚本。生成了一个成绩单，并且该成绩单应该出现在单击的那个按钮附近。有一系列按钮，在每个按钮附近，应该出现与单击的按钮相关的脚本。我选择了一个跨度元素来显示成绩单。这个 span 元素的 id 是“transcription”。

我已经在我的脚本中链接到 jQuery 和 Bootstrap。

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>    
<link rel="stylesheet" 
  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script 
    src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js">. 
    </script>

按钮所在的 HTML 部分如下所示：

<div class="d-flex mt-3 ml-0 mb-5">
   <div class="controls pl-1">
       <audio>
          <source src="2x.mp3" type="audio/mpeg">
          <source src="2x.ogg" type="audio/ogg">
       </audio>
       <button type="button" class="btn final_button text-white"  style="height: 40px; width: 40px; font-size: 11px; background-color: goldenrod;"><%- user.japanese1.japanese1g.value%></button>     
       <button type="button" class="btn btn-default btn-success points_button" style="height: 40px; width: 40px; font-size: 11px">0</button>
       <button type="button" id="start_button" onclick="startButton(this)" class="btn btn-default btn-primary score_button fas fa-microphone" data-question="japanese1g" data-field="japanese1" style="height:40px; width: 40px;"></button>
       <button type="button" onclick="playAudio(this)" class="btn btn-default talk_button fas fa-play text-white" data-string="hello" style="height:40px; width: 40px; background-color: hotpink"></button>&nbsp;&nbsp;<b>Say the whole dialogue</b>&nbsp;<br/>
       <span id="transcription" style="font-size: 12px;"></span>   
  </div>
</div>

这是我尝试过的javascript，但失败了：

buttonpress.siblings("#transcription").html() = final_transcript;

当我像这样编写 javascript 时，下面的脚本运行良好：

buttonpress.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.innerHTML = final_transcript;

但是，我不能再使用这个 javascript，因为跨度元素的位置（脚本应该出现在其中）因不同的按钮而异。它并不总是在“nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling”位置。

例如，有这种类型的按钮：

<div class="d-flex mt-3 ml-0">
   <div class="controls pl-1">
     <button type="button" class="btn final_button text-white"  style="height: 40px; width: 40px; font-size: 11px; background-color: goldenrod;"><%- user.japanese1.japanese1j.value%></button>     
     <button type="button" class="btn btn-default btn-success points_button" style="height: 40px; width: 40px; font-size: 11px">0</button>
     <button type="button" id="start_button" onclick="startButton(this)" class="btn btn-default btn-primary score_button fas fa-microphone" data-question="japanese1j" data-field="japanese1" style="height:40px; width: 40px;"></button>
     &nbsp;&nbsp;&nbsp;I lost mine.<br/>
     <span id="transcription" style="font-size: 12px;"></span>   
   </div>
 </div>

如您所见，span 元素与我在上面显示的第一个按钮示例的位置不同。

（但语音识别按钮是一样的。它是带有 的按钮id="start_button"。）

在第二种情况下，“start_button”后面没有按钮。所以这就是我不能再使用“nextSibling ....”的原因。我不想为这种其他类型的按钮编写单独的脚本。

编辑：我在上面的问题中没有说清楚，但代码行中的“buttonpress”来自以下内容。我声明了一个变量：var buttonpress在脚本中。"buttonpress" 与 ID 为 "start_button" 的按钮相同，在单击时启动语音识别过程。

标签： javascripthtmljquery

解决方案

使用最接近并找到在按下按钮后捕获最近的跨度：

避免将函数放在 html 中。我正在捕获从fa-microphone类开始的按钮

$(this).closest("div.controls.pl-1").find("span");

最接近带有类控件和 pl-1 的第一个 div，并找到使用 span 标签搜索所有子项

$("button.fa-microphone").on("click", function(){
 //find the selector wuth tag span closest to the button pressed
  var transcription = $(this).closest("div.controls.pl-1").find("span");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="d-flex mt-3 ml-0 mb-5">
  <div class="controls pl-1">
    <audio>
          <source src="2x.mp3" type="audio/mpeg">
          <source src="2x.ogg" type="audio/ogg">
       </audio>
    <button type="button" class="btn final_button text-white" style="height: 40px; width: 40px; font-size: 11px; background-color: goldenrod;"><%- user.japanese1.japanese1g.value%></button>
    <button type="button" class="btn btn-default btn-success points_button" style="height: 40px; width: 40px; font-size: 11px">0</button>
    <button type="button"  class="btn btn-default btn-primary score_button fas fa-microphone" data-question="japanese1g" data-field="japanese1" style="height:40px; width: 40px;"></button>
    <button type="button" onclick="playAudio(this)" class="btn btn-default talk_button fas fa-play text-white" data-string="hello" style="height:40px; width: 40px; background-color: hotpink"></button>&nbsp;&nbsp;<b>Say the whole dialogue</b>&nbsp;<br/>
    <span id="transcription" style="font-size: 12px;"></span>
  </div>
</div>



<div class="d-flex mt-3 ml-0">
  <div class="controls pl-1">
    <button type="button" class="btn final_button text-white" style="height: 40px; width: 40px; font-size: 11px; background-color: goldenrod;"><%- user.japanese1.japanese1j.value%></button>
    <button type="button" class="btn btn-default btn-success points_button" style="height: 40px; width: 40px; font-size: 11px">0</button>
    <button type="button"  class="btn btn-default btn-primary score_button fas fa-microphone" data-question="japanese1j" data-field="japanese1" style="height:40px; width: 40px;"></button> &nbsp;&nbsp;&nbsp;I
    lost mine.<br/>
    <span class="transcription" style="font-size: 12px;"></span>
  </div>
</div>

推荐阅读