单击 javascript 更改其他第 n 个子项
Change the other nth children on click javascript
原题-
有没有办法让我设置通过 ASP 生成的 table 中的所有其他按钮。 Net Core 使用 Razor Pages 到特定图像(通过 Font-Awesome 图标,因此它是我正在更改的 class)使用 Javascript。当用户单击其中一个按钮时(该按钮会发生变化,然后重置其他按钮)。
更新以显示进度...
我已经设法让@mjw 的建议生效,但它的行为很奇怪。我正在按照建议实施 .siblings()
jquery 方法,它似乎有效。但是,我认为我引用了 DOM.
部分的错误位
它现在完全按照我的要求工作,但它将两个 table 视为独立的并且不影响我认为是 "siblings()" 的按钮。
最终更新以显示解决方案...
我再次接受了@mjw 的建议,将我的 ID 更改为 classes 并引用了已编辑的 javascript 函数,因此它由 class
触发
来自$('#appendRqmts:nth-child(n)').on('click', function () {
至$('.appendRqmts:nth-child(n)').on('click', function () {
还有 html...
来自
<td class="border-0 btn-link py-1" data-id="209" id="appendRqmts">
<i class="fas fa-clipboard-list" id="appendRqmts_icon" /></td>
到
<td class="border-0 btn-link py-1 appendRqmts" data-id="209">
<i class="fas fa-clipboard-list appendRqmts_icon"></i></td>
这是更新后的代码段:
//-------------Specific Roles ***Qualifications*** Table Builder-------------//
$(function() {
$('.appendRqmts:nth-child(n)').on('click', function() {
var current_icon = $(this).find('i');
var sibling_icons = $(this).parentsUntil('div').siblings().find(".appendRqmts_icon");
current_icon.removeClass('fas fa-clipboard-list').addClass('fas fa-sign-in-alt');
sibling_icons.removeClass('fas fa-sign-in-alt').addClass('fas fa-clipboard-list');
//Code for appending data to page is omitted
});
});
//Here is the code that I used to control the clear all button. Added after figuring out how to do it.
$('#clearSpecRoleRqmts').on('click', function() {
var sibling_icons = $(this).parents('.card-body').find('.specRole_Table').find('.appendRqmts_icon');
sibling_icons.removeClass('fas fa-sign-in-alt').addClass('fas fa-clipboard-list');
});
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" />
<script src="https://kit.fontawesome.com/507e05d76d.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="card border-0">
<div class="card-header pb-0 bg-transparent border-0">
<div class="row animate__animated animate__fadeInDown animate__delay-1s">
<div class="col-1 pb-0 pl-1">
<h3 class="pl-0"><i class="fas fa-users"></i></h3>
</div>
<div class="col-11 pb-0">
<h3 class="px-2 py-0 animate__animated animate__fadeInDown animate__delay-1s">
<span data-toggle="titleTooltip" title="<p>Some specific roles have additional requirements to the ones listed on the right of the screen.</p><p>Click on the link to open the list of additional requirements.</p>">Specific Roles</span>
</h3>
</div>
</div>
</div>
<div class="card-body pl-0 pt-0">
<div class="row animate__animated animate__fadeInUp animate__delay-3s pt-1 pb-3">
<div class="col-10">
<a class="btn btn-outline-primary btn-block" id="clearSpecRoleRqmts">
<i class="fas fa-eraser"></i> Clear Specific Role Requirements
</a>
</div>
</div>
<table class="table lists-table py-0 border-0 specRole_Table">
<tr class="py-0">
<td class="border-0 py-1 animate__animated animate__fadeInUp animate__delay-2s specRole_JobCat">
Working in <b>Nursing</b>
</td>
</tr>
<tr>
<td class="border-0 pb-1 pt-2 animate__animated animate__fadeInUp animate__delay-2s col-10 specRole_SpecRoleType">
<h6>6 <span> | </span> Senior Registered Nurse | Adult</h6>
</td>
<td class="py-1 border-0 appendRqmts_td"></td>
</tr>
<tr>
<td class="border-0 py-1 animate__animated animate__fadeInUp animate__delay-2s col-10 specRole_SpecRoleType">
Discharge
</td>
<td class="py-1 border-0 appendRqmts_td"></td>
</tr>
<tr>
<td class="border-0 py-1 animate__animated animate__fadeInUp animate__delay-2s col-10 specRole_SpecRoleType">
EPMA
<span> (</span>Specialist<span>)</span>
</td>
<td class="border-0 animate__animated animate__fadeInLeft animate__delay-2s btn-link py-1 text-center col-2 appendRqmts" data-id="116">
<i class="fas fa-clipboard-list appendRqmts_icon"></i>
</td>
</tr>
<tr>
<td class="border-0 py-1 animate__animated animate__fadeInUp animate__delay-2s col-10 specRole_SpecRoleType">
Orthopadic
<span> (</span>Specialist<span>)</span>
</td>
<td class="py-1 border-0 appendRqmts_td"></td>
</tr>
<tr>
<td class="border-0 py-1 animate__animated animate__fadeInUp animate__delay-2s col-10 specRole_SpecRoleType">
Research
<span> (</span>Specialist<span>)</span>
</td>
<td class="border-0 animate__animated animate__fadeInLeft animate__delay-2s btn-link py-1 text-center col-2 appendRqmts" data-id="119">
<i class="fas fa-clipboard-list appendRqmts_icon"></i>
</td>
</tr>
<tr>
<td class="border-0 py-1 animate__animated animate__fadeInUp animate__delay-2s col-10 specRole_SpecRoleType">
IPC & TV
<span> (</span>Specialist<span>)</span>
</td>
<td class="border-0 animate__animated animate__fadeInLeft animate__delay-2s btn-link py-1 text-center col-2 appendRqmts" data-id="120">
<i class="fas fa-clipboard-list appendRqmts_icon"></i>
</td>
</tr>
<tr>
<td class="border-0 pb-1 pt-2 animate__animated animate__fadeInUp animate__delay-2s col-10 specRole_SpecRoleType">
<h6>6 <span> | </span> Senior Registered Nurse | Children's</h6>
</td>
</tr>
<tr>
<td class="border-0 py-1 animate__animated animate__fadeInUp animate__delay-2s col-10 specRole_SpecRoleType">
Outpatients
<span> (</span>Specialist<span>)</span>
</td>
<td class="border-0 animate__animated animate__fadeInLeft animate__delay-2s btn-link py-1 text-center col-2 appendRqmts" data-id="116">
<i class="fas fa-clipboard-list appendRqmts_icon"></i>
</td>
</tr>
<tr>
<td class="border-0 pb-1 pt-2 animate__animated animate__fadeInUp animate__delay-2s col-10 specRole_SpecRoleType">
<h6>6 <span> | </span> Senior Registered Nurse | Theatre</h6>
</td>
</tr>
<tr>
<td class="border-0 py-1 animate__animated animate__fadeInUp animate__delay-2s col-10 specRole_SpecRoleType">
Practitioner
</td>
<td class="border-0 animate__animated animate__fadeInLeft animate__delay-2s btn-link py-1 text-center col-2 appendRqmts" data-id="116">
<i class="fas fa-clipboard-list appendRqmts_icon"></i>
</td>
</tr>
</table>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
</body>
作为额外的一面,不是任何人都在努力弄清楚如何引用 DOM 的正确部分(相对于当前对象,即 - $(this)
)。我发现仅更改 bg-colour
class(使用 bootstrap 时)真的很有帮助,直到我知道我正在影响正确的 DOM 元素。例如:
var variable = $(this).parent().siblings().find('.domElementClass')
variable.addClass('bg-success')
希望这对某人有所帮助!
这是一个演示 .siblings()
的示例。您想要找到单击按钮的 js 函数,然后您可以从那里访问 this
项来更改被单击项的图像...然后是 siblings()
来设置其他图像。祝你好运
// handle click and add class
$("button").on("click", function(){
$(this).parent().css("background-color","blue");
$(this).parent().siblings().css("background-color","green");
});
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#banner-message {
background: #fff;
border-radius: 4px;
padding: 20px;
font-size: 25px;
text-align: center;
transition: all 0.2s;
margin: 0 auto;
width: 300px;
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
#banner-message.alt {
background: #0084ff;
color: #fff;
margin-top: 40px;
width: 200px;
}
#banner-message.alt button {
background: #fff;
color: #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
<span class="item">First row <button>Change color</button></span>
<span class="item">Second row <button>Change color</button></span>
<span class="item">Third row <button>Change color</button></span>
<span class="item">Fourth row <button>Change color</button></span>
</div>
原题-
有没有办法让我设置通过 ASP 生成的 table 中的所有其他按钮。 Net Core 使用 Razor Pages 到特定图像(通过 Font-Awesome 图标,因此它是我正在更改的 class)使用 Javascript。当用户单击其中一个按钮时(该按钮会发生变化,然后重置其他按钮)。
更新以显示进度...
我已经设法让@mjw 的建议生效,但它的行为很奇怪。我正在按照建议实施 .siblings()
jquery 方法,它似乎有效。但是,我认为我引用了 DOM.
它现在完全按照我的要求工作,但它将两个 table 视为独立的并且不影响我认为是 "siblings()" 的按钮。
最终更新以显示解决方案...
我再次接受了@mjw 的建议,将我的 ID 更改为 classes 并引用了已编辑的 javascript 函数,因此它由 class
触发来自$('#appendRqmts:nth-child(n)').on('click', function () {
至$('.appendRqmts:nth-child(n)').on('click', function () {
还有 html...
来自
<td class="border-0 btn-link py-1" data-id="209" id="appendRqmts">
<i class="fas fa-clipboard-list" id="appendRqmts_icon" /></td>
到
<td class="border-0 btn-link py-1 appendRqmts" data-id="209">
<i class="fas fa-clipboard-list appendRqmts_icon"></i></td>
这是更新后的代码段:
//-------------Specific Roles ***Qualifications*** Table Builder-------------//
$(function() {
$('.appendRqmts:nth-child(n)').on('click', function() {
var current_icon = $(this).find('i');
var sibling_icons = $(this).parentsUntil('div').siblings().find(".appendRqmts_icon");
current_icon.removeClass('fas fa-clipboard-list').addClass('fas fa-sign-in-alt');
sibling_icons.removeClass('fas fa-sign-in-alt').addClass('fas fa-clipboard-list');
//Code for appending data to page is omitted
});
});
//Here is the code that I used to control the clear all button. Added after figuring out how to do it.
$('#clearSpecRoleRqmts').on('click', function() {
var sibling_icons = $(this).parents('.card-body').find('.specRole_Table').find('.appendRqmts_icon');
sibling_icons.removeClass('fas fa-sign-in-alt').addClass('fas fa-clipboard-list');
});
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" />
<script src="https://kit.fontawesome.com/507e05d76d.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="card border-0">
<div class="card-header pb-0 bg-transparent border-0">
<div class="row animate__animated animate__fadeInDown animate__delay-1s">
<div class="col-1 pb-0 pl-1">
<h3 class="pl-0"><i class="fas fa-users"></i></h3>
</div>
<div class="col-11 pb-0">
<h3 class="px-2 py-0 animate__animated animate__fadeInDown animate__delay-1s">
<span data-toggle="titleTooltip" title="<p>Some specific roles have additional requirements to the ones listed on the right of the screen.</p><p>Click on the link to open the list of additional requirements.</p>">Specific Roles</span>
</h3>
</div>
</div>
</div>
<div class="card-body pl-0 pt-0">
<div class="row animate__animated animate__fadeInUp animate__delay-3s pt-1 pb-3">
<div class="col-10">
<a class="btn btn-outline-primary btn-block" id="clearSpecRoleRqmts">
<i class="fas fa-eraser"></i> Clear Specific Role Requirements
</a>
</div>
</div>
<table class="table lists-table py-0 border-0 specRole_Table">
<tr class="py-0">
<td class="border-0 py-1 animate__animated animate__fadeInUp animate__delay-2s specRole_JobCat">
Working in <b>Nursing</b>
</td>
</tr>
<tr>
<td class="border-0 pb-1 pt-2 animate__animated animate__fadeInUp animate__delay-2s col-10 specRole_SpecRoleType">
<h6>6 <span> | </span> Senior Registered Nurse | Adult</h6>
</td>
<td class="py-1 border-0 appendRqmts_td"></td>
</tr>
<tr>
<td class="border-0 py-1 animate__animated animate__fadeInUp animate__delay-2s col-10 specRole_SpecRoleType">
Discharge
</td>
<td class="py-1 border-0 appendRqmts_td"></td>
</tr>
<tr>
<td class="border-0 py-1 animate__animated animate__fadeInUp animate__delay-2s col-10 specRole_SpecRoleType">
EPMA
<span> (</span>Specialist<span>)</span>
</td>
<td class="border-0 animate__animated animate__fadeInLeft animate__delay-2s btn-link py-1 text-center col-2 appendRqmts" data-id="116">
<i class="fas fa-clipboard-list appendRqmts_icon"></i>
</td>
</tr>
<tr>
<td class="border-0 py-1 animate__animated animate__fadeInUp animate__delay-2s col-10 specRole_SpecRoleType">
Orthopadic
<span> (</span>Specialist<span>)</span>
</td>
<td class="py-1 border-0 appendRqmts_td"></td>
</tr>
<tr>
<td class="border-0 py-1 animate__animated animate__fadeInUp animate__delay-2s col-10 specRole_SpecRoleType">
Research
<span> (</span>Specialist<span>)</span>
</td>
<td class="border-0 animate__animated animate__fadeInLeft animate__delay-2s btn-link py-1 text-center col-2 appendRqmts" data-id="119">
<i class="fas fa-clipboard-list appendRqmts_icon"></i>
</td>
</tr>
<tr>
<td class="border-0 py-1 animate__animated animate__fadeInUp animate__delay-2s col-10 specRole_SpecRoleType">
IPC & TV
<span> (</span>Specialist<span>)</span>
</td>
<td class="border-0 animate__animated animate__fadeInLeft animate__delay-2s btn-link py-1 text-center col-2 appendRqmts" data-id="120">
<i class="fas fa-clipboard-list appendRqmts_icon"></i>
</td>
</tr>
<tr>
<td class="border-0 pb-1 pt-2 animate__animated animate__fadeInUp animate__delay-2s col-10 specRole_SpecRoleType">
<h6>6 <span> | </span> Senior Registered Nurse | Children's</h6>
</td>
</tr>
<tr>
<td class="border-0 py-1 animate__animated animate__fadeInUp animate__delay-2s col-10 specRole_SpecRoleType">
Outpatients
<span> (</span>Specialist<span>)</span>
</td>
<td class="border-0 animate__animated animate__fadeInLeft animate__delay-2s btn-link py-1 text-center col-2 appendRqmts" data-id="116">
<i class="fas fa-clipboard-list appendRqmts_icon"></i>
</td>
</tr>
<tr>
<td class="border-0 pb-1 pt-2 animate__animated animate__fadeInUp animate__delay-2s col-10 specRole_SpecRoleType">
<h6>6 <span> | </span> Senior Registered Nurse | Theatre</h6>
</td>
</tr>
<tr>
<td class="border-0 py-1 animate__animated animate__fadeInUp animate__delay-2s col-10 specRole_SpecRoleType">
Practitioner
</td>
<td class="border-0 animate__animated animate__fadeInLeft animate__delay-2s btn-link py-1 text-center col-2 appendRqmts" data-id="116">
<i class="fas fa-clipboard-list appendRqmts_icon"></i>
</td>
</tr>
</table>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
</body>
作为额外的一面,不是任何人都在努力弄清楚如何引用 DOM 的正确部分(相对于当前对象,即 - $(this)
)。我发现仅更改 bg-colour
class(使用 bootstrap 时)真的很有帮助,直到我知道我正在影响正确的 DOM 元素。例如:
var variable = $(this).parent().siblings().find('.domElementClass')
variable.addClass('bg-success')
希望这对某人有所帮助!
这是一个演示 .siblings()
的示例。您想要找到单击按钮的 js 函数,然后您可以从那里访问 this
项来更改被单击项的图像...然后是 siblings()
来设置其他图像。祝你好运
// handle click and add class
$("button").on("click", function(){
$(this).parent().css("background-color","blue");
$(this).parent().siblings().css("background-color","green");
});
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#banner-message {
background: #fff;
border-radius: 4px;
padding: 20px;
font-size: 25px;
text-align: center;
transition: all 0.2s;
margin: 0 auto;
width: 300px;
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
#banner-message.alt {
background: #0084ff;
color: #fff;
margin-top: 40px;
width: 200px;
}
#banner-message.alt button {
background: #fff;
color: #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
<span class="item">First row <button>Change color</button></span>
<span class="item">Second row <button>Change color</button></span>
<span class="item">Third row <button>Change color</button></span>
<span class="item">Fourth row <button>Change color</button></span>
</div>