Question

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

紫色标签是选中的标签。我需要做的就是选择新选项卡时显示一条消息。对于测试，我们只需将此消息放入javascript警报（）即可。以下是包含“客户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.
}

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

1 个答案: