gpt4 book ai didi

javascript - 带有 .hide() 函数的 Jquery 代码在 Django 模板中不起作用

转载 作者:行者123 更新时间:2023-11-30 14:21:48 25 4
gpt4 key购买 nike

我想在我的 Django 模板中使用 jQuery。当我点击我的 #edit-website-btn 按钮时,没有任何反应。在控制台内没有任何错误。怎么了?

<!-- in <head> -->
<script src="{% static 'js/jquery.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<script>
$(function () {
$('#edit-website-btn').click(function () {
$('#account-website').hide();
});
});
</script>

<!-- in <body> -->
{% for account in accounts %}
<tr>
<td>
<div id="account-website">{{ account.website }}</div>
<button type="button" class="btn btn-outline-primary" id="edit-website-btn">
Edit
</button>
<form id="website-form" class="hidden">
<input type="text" id="new-website" name="new-website">
</form>
</td>
</tr>
{% endfor %}

最佳答案

问题是因为输出 HTML 的 Django 循环正在创建多个具有相同 id 的元素,这是无效的。您可以改用通用类来解决此问题,然后在单击按钮时使用 jQuery 中的 DOM 遍历来关联元素。试试这个:

<td>
<div class="account-website">{{ account.website }}</div>
<button type="button" class="btn btn-outline-primary edit-website-btn">
Edit
</button>
<form id="website-form" class="hidden">
<input type="text" class="new-website" name="new-website">
</form>
</td>
$(function () {
$('.edit-website-btn').click(function () {
$(this).siblings('.account-website').hide();
});
});

关于javascript - 带有 .hide() 函数的 Jquery 代码在 Django 模板中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52624434/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com