使用 detach() 在多个元素之间切换

发布于 2025-01-12 23:52:29 字数 845 浏览 1 评论 0原文

我在一个页面上有多个视频流，但任何时候只能看到/听到一个。流 1 在页面加载时应可见，然后单击“流 2”或“流 3”按钮应相应切换到该流。

使用显示/隐藏 js 事件将不起作用，因为隐藏时仍然可以在页面上听到隐藏的流。我对 js 的了解仅限于无（但我正在尝试！），尽管 detach() 似乎很适合我的用例，因为元素可以被删除，但也可以恢复。

W3schools 上的 this 的以下后代成功隐藏了 Stream（元素）2 ，有两个对应 ID 的按钮，但最终我离我所追求的无缝切换还有一段路...

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  var x;
  $("#button1_id").click(function(){
    x = $("#element_two_id").detach();
  });
  $("#button2_id").click(function(){
    $("#element_one_id").prepend(x);
  });
  
});
</script>
</head>
</html>

这是可以通过 detach() 实现的还是我喊错了树？

原文

I have multiple video streams on a page though only one should be seen/heard at any time. Stream 1 should be visible on page load, then clicking a "Stream 2" or "Stream 3" button should switch to it accordingly.

Using Show/hide js events won't work because the hidden stream can still be heard on the page when hidden. My knowledge of js is limited to none (but I'm trying!) though it seems that detach() is a good fit for my use case as the element can be removed but also reinstated.

The below descendent of this on W3schools successfully hides Stream (element) 2, with two buttons of corresponding IDs, but ultimately I'm a way off the seamless toggle that I'm after...

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  var x;
  $("#button1_id").click(function(){
    x = $("#element_two_id").detach();
  });
  $("#button2_id").click(function(){
    $("#element_one_id").prepend(x);
  });
  
});
</script>
</head>
</html>

Is this achievable with detach() or am I barking up the wrong tree?

分享到QQ

分享到微博