单击 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 &amp; 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&#x27;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 &nbsp;<button>Change color</button></span>
  <span class="item">Second row &nbsp;<button>Change color</button></span>
  <span class="item">Third row &nbsp;<button>Change color</button></span>
  <span class="item">Fourth row &nbsp;<button>Change color</button></span>
</div>