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>

标签： javascripttampermonkey

Answer 1

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

您需要更改 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>