如何比较来自不同元素的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);

---

EDITED

下面的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匹配， 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>