通过 jquery 在两个 DOM 元素之间切换答案

【问题标题】：Changing between two DOM elements via jquery通过 jquery 在两个 DOM 元素之间切换
【发布时间】：2021-07-15 06:47:28
【问题描述】：

我正在做某事，但不太明白为什么这不起作用。我正在尝试制作一个在两个 dom 元素之间切换的按钮。

我唯一的猜测是它只是改变了 html 客户端并从服务器中提取类信息？

提前致谢

$(document).ready(function(){
  $(".a").click(function(){
    $(this).parent().html("<span class='b'>toggle down</span>");
  });
  $(".b").click(function(){
    $(this).parent().html("<span class='a'>toggle up</span>");
  });
});

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<span class="toggle">
    <span class="a">toggle up</span>
</span>

</body>
</html>

【问题讨论】：

您好，您在 dom 中动态附加 html，因此您需要将其与一些静态元素绑定。因此，将$(".a").click(function(){ 更改为$(".toggle").on('click', '.a', function() {，其他也一样。工作code.

标签： javascript html jquery dom

【解决方案1】：

当.a 被点击时，.b 被作为一个全新的元素注入到 DOM 中。所以，每次注入.b时都需要声明点击事件。

$(document).ready(function(){
  let toggleDown;

  function toggleUp() {
    $(".b").click(function(){
      $(this).parent().html("<span class='a'>toggle up</span>");
      toggleDown();
    });
  }

  toggleDown = function() {
    $(".a").click(function(){
      $(this).parent().html("<span class='b'>toggle down</span>");
      toggleUp();
    });
  }
  

  toggleDown();
});

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<span class="toggle">
    <span class="a">toggle up</span>
</span>

</body>
</html>

更新

这里有一个更合适的方法。

$(document).ready(function(){
  
  const a = "<span class='a'>toggle up</span>";
  const b = "<span class='b'>toggle down</span>";
  
  $('.toggle').click(function() {
    let self = $(this);
    const isA = self.children(":first").hasClass('a');
    self.html(isA ? b : a);
  });
  
});

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<span class="toggle">
    <span class="a">toggle up</span>
</span>

</body>
</html>

或

您可以使用 react.js 或 vue.js 来获取声明式方法。目前您使用的是命令式方法。您可以在以下位置了解更多信息 https://codeburst.io/declarative-vs-imperative-programming-a8a7c93d9ad2

【讨论】：