javascript - 每次将类添加到元素时，使用 waitForKeyElements 显示一条消息

Question

过去 3 天，我一直在学习 javascript、jQuery 和用户脚本，以及如何使用 firebug，尝试在 desk.com 网站上显示有关选定客户的信息。到目前为止，除了大量的学习之外，我没有什么可展示的。当选择新选项卡时，我根本无法收到更新消息。

紫色选项卡是选定的选项卡。我需要做的就是当选择新选项卡时显示一条消息。为了进行测试，我们只需将此消息放入 JavaScript Alert() 中即可。以下是包含“客户 1”选项卡的整个顶栏的 HTML。

<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner all">
  <li class="a-icons ui-state-default ui-corner-top">
    <a id="tab-tickets-label" href="#tabs-tickets">
      <img width="18" height="16" src="https://d3jyn100am7dxp.cloudfront.net/images/a-icon-agent-list.png?1352530323" alt="">
     </a>
  </li>
  <li class="a-icons ui-state-default ui-corner-top">
    <a id="tab-kb" href="#tabs-kb">
      <span>
        <img width="16" height="17" src="https://d3jyn100am7dxp.cloudfront.net/images/a-icon-knowledge-base.png?1352530323" alt="">
      </span>
    </a>
  </li>
  <li class="a-icons a-last ui-state-default ui-corner-top">
    <a id="tab-search" href="#tabs-search">
      <span>
        <img width="18" height="17" src="https://d3jyn100am7dxp.cloudfront.net/images/a-icon-search.png?1352530323" alt="">
      </span>
    </a>
  </li>
  <li class="ui-state-default ui-corner-top">
    <a id="tab_header_ticket_id_73354627" href="#tabs-tid_88be8cc0-116b-0130-bf8a-12313f070061">
      <span id="tabs-tid_88be8cc0-116b-0130-bf8a-12313f070061-closer" class="tab_closer">
      </span>
      <span>
      <span id="tabs-tid_88be8cc0-116b-0130-bf8a-12313f070061-icon" class="top_tab_icon">
        <img width="20" height="20" src="https://d3jyn100am7dxp.cloudfront.net/images/interactions/20/a-phone.png?1352530323" alt="">
      </span>
      <span id="tabs-tid_88be8cc0-116b-0130-bf8a-12313f070061-customer-name" class="top_tab_customer_name">Customer 2</span>
      </span>
      <span id="tabs-tid_88be8cc0-116b-0130-bf8a-12313f070061-service-level-bar" class="tab_service_level_indicator"> </span>
    </a>
  </li>
  <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active">
    <a id="tab_header_ticket_id_73382205" href="#tabs-tid_88cd2df0-116b-0130-1271-12313f06c46f">
      <span id="tabs-tid_88cd2df0-116b-0130-1271-12313f06c46f-closer" class="tab_closer"></span>
      <span>
        <span id="tabs-tid_88cd2df0-116b-0130-1271-12313f06c46f-icon" class="top_tab_icon">
          <img width="20" height="20" src="https://d3jyn100am7dxp.cloudfront.net/images/interactions/20/a-email.png?1352530323" alt="">
        </span>
        <span id="tabs-tid_88cd2df0-116b-0130-1271-12313f06c46f-customer-name" class="top_tab_customer_name">Customer 1</span>
      </span>
      <span id="tabs-tid_88cd2df0-116b-0130-1271-12313f06c46f-service-level-bar" class="tab_service_level_indicator"> </span>
    </a>
  </li>
</ul>

在上面的代码中，具有“ui-tabs-selected”类的元素是 <li> 。每次选择新选项卡时，此类都会添加到新选择的选项卡中。每次将“ui-tabs-selected”类添加到新元素时，我需要我的脚本显示一条消息，例如“选择了新客户”。

这是我最近尝试过的 scriptAttemp.user.js。

// ==UserScript==
// @name          deskNotifications2
// @namespace     http://www.dutgriff.com/userscripts
// @description   Notifications for desk.com
// @include       https://nvows.desk.com/agent*
// @version       1.0
// @require       http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @require       https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant         GM_addStyle
// ==/UserScript==

waitForKeyElements (
    ".ui-tabs-selected", addAlert
);

function addAlert (jNode) {
    alert('The user was selected.');
}

上面的脚本一开始效果很好。它会在页面加载时显示消息。如果我选择新选项卡，它将再次显示该消息。然后，当我再次选择新选项卡时，它什么也不做。

我需要它在每次选择新选项卡或每次将“.ui-tabs-selected”移动到新位置时显示消息。该类可以通过单击页面上的其他内容移动到新位置，而不仅仅是单击不同的选项卡。

例如，当没有选择客户选项卡时，我可以单击按钮来查看新客户。这将打开一个新选项卡并将“.ui-tabs-selected”放置在此新选项卡上。非常感谢所有建议/信息页面链接/建设性批评。抱歉，我对这一切都很陌生。

Answer 1

默认情况下，waitForKeyElements()每个找到的单个节点仅触发一次。但是，您想要的是当该类 (ui-tabs-selected) 移动从一个节点到另一个节点时触发。

这意味着您必须跟踪旧节点，看看它是否与新节点相同。如果您使用 waitForKeyElements()，则必须告诉它在找到的各个节点上运行多次。您可以通过让回调函数(在本例中为 addAlert())返回 true 来实现这一点。

把它们放在一起，你的脚本将变成:

// ==UserScript==
// @name          deskNotifications2
// @namespace     http://www.dutgriff.com/userscripts
// @description   Notifications for desk.com
// @include       https://nvows.desk.com/agent*
// @version       1.0
// @require       http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @require       https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant         GM_addStyle
// ==/UserScript==

waitForKeyElements (
    ".ui-tabs-selected", addAlert
);

function addAlert (jNode) {
    if (typeof this.lastNode == "undefined"  ||  this.lastNode != jNode[0]) {
        alert('The user was selected.');
    }
    this.lastNode = jNode[0];

    return true;    // Allow repeat firings for this node.
}