javascript - 如何比较来自不同元素的 2 个值并仅对具有匹配值的元素采取行动？

Question

我即将完成一个脚本，该脚本将搜索多个元素以查找人名。如果脚本找到匹配项，它应该只为包含人名的元素获取该元素中的 ID 值。

之后，此脚本应搜索一组不同的元素，并找到它们的输入值。如果输入值与前面元素的 ID 值匹配，我想让它更改与具有输入值的元素共享同一父元素的子元素的背景颜色。

预期结果:本质上:假设我有 3 个项目，但只有 2 个包含单词“Rufio”。仅对于包含“Rufio”的项目，这些项目的背景颜色应该更改。

当前结果:脚本当前不是只更改包含“Rufio”的元素的背景颜色，而是更改所有元素的颜色。

我确定我已经迷失在所有括号中了，但我哪里出错了？

var checkexist = setInterval(function() {
  var tickets = document.querySelectorAll("[id^=ticket-tip-] > div > ul > li");

  tickets.forEach(ticket => {
    if (ticket.innerHTML.indexOf("Rufio") !== -1) {
      var ticketid = ticket.parentNode.parentNode.parentNode.id;
      var fancyID = ticketid.replace("ticket-tip-", "");
      var mainareas = document.querySelectorAll(
        "[id^=player-ticket-content] > div.ticket-holder > div > ul > li > input"
      );
      var tickethrefs = document.querySelectorAll(
        "[id^=player-ticket-content] > div.ticket-holder > div > ul > li > a"
      );

      mainareas.forEach(mainarea => {
        tickethrefs.forEach(tickethref => {
          if ((mainarea.value = fancyID)) {
            tickethref.style.backgroundColor = "#99ff66";
            console.log(mainarea.value);
          }
        });
      });
    }
  });
  clearInterval(checkexist);
}, 7000);

---

已编辑

下面的 HTML 片段:

<div id="player-ticket-content">
  <button class="btn btn-small" style="display: none; opacity: 1;">Merge</button>
  <div class="loading" style="opacity: 0; display: none;">
    <div class="spinner dotted"></div>
  </div>
  <div class="ticket-holder" style="display: block;">
    <div class="tooltip-holder">
      <ul class="tickets " style="display: block; max-height: 90px; opacity: 1;">

        <li>
          <input type="checkbox" name="ticket[]" value="40070921" disabled="disabled">
          <a class="ticket zd" href="https://company.zendesk.com/agent/tickets/40070921" id="ticket-40070921"> <span class="ticket_status_label solved">solved</span> <span class="similarity" title="Similarity of ticket tags" style="background-color: rgb(255, 255, 255);">                <i class="icon-star"></i>        </span> <span class="subject"><span>hello?</span></span>
          </a>
        </li>

        <li>
          <input type="checkbox" name="ticket[]" value="39711568" disabled="disabled">
          <a class="ticket zd" href="https://company.zendesk.com/agent/tickets/39711568" id="ticket-39711568"> <span class="ticket_status_label closed">closed</span> <span class="similarity" title="Similarity of ticket tags" style="background-color: rgb(255, 174, 174);">                78%        </span> <span class="subject"><span>hello again!</span></span>
          </a>
        </li>

        <li>
          <input type="checkbox" name="ticket[]" value="21875024" disabled="disabled">
          <a class="ticket zd" href="https://company.zendesk.com/agent/tickets/21875024" id="ticket-21875024"> <span class="ticket_status_label closed">closed</span> <span class="similarity" title="Similarity of ticket tags" style="background-color: rgb(255, 241, 241);">                44%        </span> <span class="subject"><span>woop woop</span></span>
          </a>
        </li>

      </ul>
      <div class="ticket-tip" id="ticket-tip-40070921" style="top: 24px; left: 3px; display: none;"> <span class="nub"><span></span></span>
        <div class="comment">
          <ul>
            <li><strong>Date:</strong> Apr 22, 2019</li>
            <li><strong>Assignee:</strong> Rufio</li>
            <li><strong>Requester:</strong> Customer</li>
          </ul>
          <p>test!</p>
        </div>
      </div>
      <div class="ticket-tip" id="ticket-tip-39711568" style="top: 48px; left: 3px; display: none;"> <span class="nub"><span></span></span>
        <div class="comment">
          <ul>
            <li><strong>Date:</strong> Mar 26, 2019</li>
            <li><strong>Assignee:</strong> Rufio</li>
            <li><strong>Requester:</strong> Customer</li>
          </ul>
          <p>hello hello!</p>
        </div>
      </div>
      <div class="ticket-tip" id="ticket-tip-21875024" style="top: 72px; left: 3px; display: none;"> <span class="nub"><span></span></span>
        <div class="comment">
          <ul>
            <li><strong>Date:</strong> May 28, 2016</li>
            <li><strong>Assignee:</strong> Robert</li>
            <li><strong>Requester:</strong> Customer</li>
          </ul>
          <p>It's me again!

          </p>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

(mainarea.value = fancyID) 是一个赋值。你想要的是一个比较。使用 (mainarea.value === fancyID)。另外，您没有考虑 tickethref.id 是否真的匹配 fancyID，它只是为所有 tickethref 着色。

你需要改变if条件

if ((mainarea.value === fancyID && tickethref.id.includes(fancyID))) {
    tickethref.style.backgroundColor = "#99ff66";
    console.log(mainarea.value);
}

var checkexist = setInterval(function() {
  var tickets = document.querySelectorAll("[id^=ticket-tip-] > div > ul > li");

  tickets.forEach(ticket => {
    if (ticket.innerHTML.indexOf("Rufio") !== -1) {
      var ticketid = ticket.parentNode.parentNode.parentNode.id;
      var fancyID = ticketid.replace("ticket-tip-", "");
      var mainareas = document.querySelectorAll(
        "[id^=player-ticket-content] > div.ticket-holder > div > ul > li > input"
      );
      var tickethrefs = document.querySelectorAll(
        "[id^=player-ticket-content] > div.ticket-holder > div > ul > li > a"
      );
      mainareas.forEach(mainarea => {
        tickethrefs.forEach(tickethref => {
          if ((mainarea.value === fancyID && tickethref.id.includes(fancyID))) {
            tickethref.style.backgroundColor = "#99ff66";
            console.log(mainarea.value);
          }
        });
      });
    }
  });
  clearInterval(checkexist);
}, 100);

<div id="player-ticket-content">


  <div class="ticket-holder" style="display: block;">
    <div class="tooltip-holder">
      <ul class="tickets " style="display: block; max-height: 90px; opacity: 1;">

        <li>
          <input type="checkbox" name="ticket[]" value="40070921" disabled="disabled">
          <a class="ticket zd" href="https://companyname.zendesk.com/agent/tickets/40070921" id="ticket-40070921"> <span class="ticket_status_label solved">solved</span> </a>
        </li>

        <li>
          <input type="checkbox" name="ticket[]" value="39711568" disabled="disabled">
          <a class="ticket zd" href="https://companyname.zendesk.com/agent/tickets/39711568" id="ticket-39711568"> <span class="ticket_status_label closed">closed</span> </a>
        </li>

        <li>
          <input type="checkbox" name="ticket[]" value="21875024" disabled="disabled">
          <a class="ticket zd" href="https://company.zendesk.com/agent/tickets/21875024" id="ticket-21875024"> <span class="ticket_status_label closed">closed</span> <span class="similarity" title="Similarity of ticket tags" style="background-color: rgb(255, 241, 241);">                44%        </span> <span class="subject"><span>text here!</span></span>
          </a>
        </li>

      </ul>
      <div class="ticket-tip" id="ticket-tip-40070921" style="top: 22px; left: 3px; display: none;">
        <div class="comment">
          <ul>
            <li><strong>Date:</strong> Apr 22, 2019</li>
            <li><strong>Assignee:</strong> Rufio </li>
            <li><strong>Requester:</strong> Customer</li>
          </ul>
          <p>text here!</p>
        </div>
      </div>
      <div class="ticket-tip" id="ticket-tip-39711568" style="top: 26px; left: 3px; display: none;"> <span class="nub"><span></span></span>
        <div class="comment">
          <ul>
            <li><strong>Date:</strong> Mar 26, 2019</li>
            <li><strong>Assignee:</strong> Rufio</li>
            <li><strong>Requester:</strong> Customer</li>
          </ul>
          <p>more text!</p>
        </div>
      </div>
      <div class="ticket-tip" id="ticket-tip-21875024" style="top: 50px; left: 3px; display: none;"> <span class="nub"><span></span></span>
        <div class="comment">
          <ul>
            <li><strong>Date:</strong> May 28, 2016</li>
            <li><strong>Assignee:</strong> Robert</li>
            <li><strong>Requester:</strong> Customer</li>
          </ul>
          <p>Oh hey, text!</p>
        </div>
      </div>
    </div>
  </div>
</div>

我觉得你的 for 循环是不必要的。如果您使用 id，它们应该是唯一的。我修改了它以使其更简单。请参阅 tickethref 选择器。

var checkexist = setInterval(function() {
  var tickets = document.querySelectorAll("[id^=ticket-tip-] > div > ul > li");

  tickets.forEach(ticket => {
    if (ticket.innerHTML.indexOf("Rufio") !== -1) {
      var ticketid = ticket.parentNode.parentNode.parentNode.id;
      var fancyID = ticketid.replace("ticket-tip-", "");
      var tickethref = document.querySelector(
        `[id^=player-ticket-content] > div.ticket-holder > div > ul > li > a[id=ticket-${fancyID}]`
      );
      if (tickethref) {
        tickethref.style.backgroundColor = "#99ff66";
      }
    }
  });
  clearInterval(checkexist);
}, 100);

<div id="player-ticket-content">


  <div class="ticket-holder" style="display: block;">
    <div class="tooltip-holder">
      <ul class="tickets " style="display: block; max-height: 90px; opacity: 1;">

        <li>
          <input type="checkbox" name="ticket[]" value="40070921" disabled="disabled">
          <a class="ticket zd" href="https://companyname.zendesk.com/agent/tickets/40070921" id="ticket-40070921"> <span class="ticket_status_label solved">solved</span> </a>
        </li>

        <li>
          <input type="checkbox" name="ticket[]" value="39711568" disabled="disabled">
          <a class="ticket zd" href="https://companyname.zendesk.com/agent/tickets/39711568" id="ticket-39711568"> <span class="ticket_status_label closed">closed</span> </a>
        </li>

        <li>
          <input type="checkbox" name="ticket[]" value="21875024" disabled="disabled">
          <a class="ticket zd" href="https://company.zendesk.com/agent/tickets/21875024" id="ticket-21875024"> <span class="ticket_status_label closed">closed</span> <span class="similarity" title="Similarity of ticket tags" style="background-color: rgb(255, 241, 241);">                44%        </span> <span class="subject"><span>text here!</span></span>
          </a>
        </li>

      </ul>
      <div class="ticket-tip" id="ticket-tip-40070921" style="top: 22px; left: 3px; display: none;">
        <div class="comment">
          <ul>
            <li><strong>Date:</strong> Apr 22, 2019</li>
            <li><strong>Assignee:</strong> Rufio </li>
            <li><strong>Requester:</strong> Customer</li>
          </ul>
          <p>text here!</p>
        </div>
      </div>
      <div class="ticket-tip" id="ticket-tip-39711568" style="top: 26px; left: 3px; display: none;"> <span class="nub"><span></span></span>
        <div class="comment">
          <ul>
            <li><strong>Date:</strong> Mar 26, 2019</li>
            <li><strong>Assignee:</strong> Rufio</li>
            <li><strong>Requester:</strong> Customer</li>
          </ul>
          <p>more text!</p>
        </div>
      </div>
      <div class="ticket-tip" id="ticket-tip-21875024" style="top: 50px; left: 3px; display: none;"> <span class="nub"><span></span></span>
        <div class="comment">
          <ul>
            <li><strong>Date:</strong> May 28, 2016</li>
            <li><strong>Assignee:</strong> Robert</li>
            <li><strong>Requester:</strong> Customer</li>
          </ul>
          <p>Oh hey, text!</p>
        </div>
      </div>
    </div>
  </div>
</div>