Как я могу сравнить 2 значения из разных элементов и действовать ТОЛЬКО для элементов, которые имеют совпадающие значения? - PullRequest
Новая
       12

Как я могу сравнить 2 значения из разных элементов и действовать ТОЛЬКО для элементов, которые имеют совпадающие значения?

2 голосов
/ 01 мая 2019

Я почти закончил со скриптом, который будет искать несколько элементов, чтобы найти имя человека. Если скрипт находит совпадение, он ДОЛЖЕН получить значение идентификатора в этом элементе ТОЛЬКО для элементов, которые содержат имя человека.

После этого этот скрипт должен искать другую группу элементов и находить их входные значения. Если входные значения совпадают со значениями идентификатора из предыдущих элементов, я бы хотел, чтобы он изменил цвет фона для дочернего элемента, который имеет тот же родительский элемент, что и родительские элементы с входными значениями.

Ожидаемый результат : По существу: допустим, у меня есть 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>

1 Ответ

3 голосов
/ 01 мая 2019

(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>

Я чувствую, что ваши петли не нужны. Если вы работаете с идентификаторами, они должны быть уникальными. Я изменил его, чтобы сделать его намного проще. См. Селектор 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>
...