通过 jquery 在两个 DOM 元素之间切换
Posted
技术标签:
【中文标题】通过 jquery 在两个 DOM 元素之间切换【英文标题】：Changing between two DOM elements via jquery 【发布时间】：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.
【参考方案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
【讨论】：
以上是关于通过 jquery 在两个 DOM 元素之间切换的主要内容，如果未能解决你的问题，请参考以下文章