使用 Jquery 根据 [标题] 显示和隐藏元素

Question

我正在尝试创建一个项目列表，当您单击一个项目时，会打开与该项目相关的视频。因此，我尝试使用 [title]，这样每当我单击一个 title=xxx 的项目时，title=xxx 的视频就会显示（其他的会隐藏）。我不知道如何使用变量 select 正确的项目。这是我尝试过的：

$(".speaker").click(function() {
  let speakerName = $(this).attr('title');
  console.log(speakerName);
  $(".speaker-content [title!=" + speakerName + "]").hide();
  $(".speaker-content [title ==" + speakerName + "]").show();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="presentations">
  <div class="speaker" title="s5-sp1">
    <p><i class="fas fa-info-circle"></i>Dr Daniel</p>
  </div>

  <div class="speaker-content" title="s5-sp1">
    <div class="videowrapper">
      <iframe width="100%" src="https://www.youtube.com/xxx" title="YouTube video player"></iframe>
    </div>
  </div>

</div>

我也试着用一个 for each 来检查它们，但没有成功

欢迎任何帮助，谢谢。

Answer 1

您最大的错误是 class 和属性之间的 space。该属性位于同一 class 上，因此需要连接它们。此外，您不要在属性中使用比较运算符 ==。

$('.speaker').click(function(){
  let speakerName = $(this).attr('title');
  $('.speaker-content').hide();
  $(`.speaker-content[title='${speakerName}']`).show();
});

使用 Jquery 根据 [标题] 显示和隐藏元素

Show and hide elements based on their [title] using Jquery

javascript

jquery

attributes