我有一些关于动态创建元素的问题。我正在尝试为我的站点创建一个页面,该页面将显示用户列表(已从 Controller 传递到我的 View )。我为每个用户创建了一个 div 持有者,在每个 div 中我有两个 h3 标签,显示用户的 ID 和名称。每个用户 div 还包含一个按钮,允许隐藏或显示用户。
<div class="single-user" id="@user.Hidden.ToString()">
<h3>ID: @user.Id</h3>
<h3>Name: @user.Forename @user.Surname</h3>
<span><input type="submit" class="sub-btn" /></span>
</div>
除了“name”和“id”属性之外,我还传入了一个“隐藏的 bool 属性”。这用于检查用户是否已被隐藏。我遇到的问题是因为元素是动态创建的,它们都共享相同的类和 ID,所以我无法检查用户是否隐藏。我在网上查看并找到了可能的解决方案,但是,它仍然无法正常工作。这是我的 javascript 代码。
<script type="text/javascript">
$('.single-user').on('click', '.sub-btn', function () {
if ($('.single-user').has('#True')) {
console.log("true");
}
else {
console.log("false");
}
});
</script>
如有任何帮助,我们将不胜感激。
最佳答案
<div class="single-user" data-visible="@user.Hidden.ToString()">
<h3>ID: @user.Id</h3>
<h3>Name: @user.Forename @user.Surname</h3>
<span><input type="submit" class="sub-btn" /></span>
</div>
<script type="text/javascript">
$(document).on('click', '.sub-btn', function () {
if ($(this).closest('.single-user').attr('data-visible')=="True") {
console.log("true");
}
else {
console.log("false");
}
});
</script>
关于javascript - 具有相同类的动态元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19666260/