Javascript 在AJAX驱动的站点上选择并激活正确的控件

因此，每次我访问任何nike.com运动鞋页面（没有HTML链接），它都会自动选择我的鞋码，将其添加到购物车中，并为我结账

我目前正在尝试使用此脚本（见下文），但每次我进入“运动鞋”页面时，它都不会正确添加我想要的鞋号，而是直接进入结帐，购物车中没有任何内容

我被告知需要将代码与实际的HTML页面匹配，但我不知道如何做到这一点。请帮忙

// ==UserScript==
// @name     _Nike auto-buy(!!!) script
// @include  http://*/*
// @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==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/

var okayToClickAddtoCart = false;

//-- Assumes that size is a standard <option> tag or similar...
waitForKeyElements (".selectBox-label[value='10']", selectShoeSize);

function selectShoeSize (jNode) {
    jNode.prop ('selected', true);

    okayToClickAddtoCart = true;
}


waitForKeyElements (".add-to-cart.nike-button", clickAddToCart);

function clickAddToCart (jNode) {
    if ( ! okayToClickAddtoCart) {
        return true;    //-- Don't click yet.
    }

    var clickEvent  = document.createEvent ('MouseEvents');
    clickEvent.initEvent ('click', true, true);
    jNode[0].dispatchEvent (clickEvent);
}


waitForKeyElements (".checkout-button", clickCheckoutButton);

function clickCheckoutButton (jNode) {
    var clickEvent  = document.createEvent ('MouseEvents');
    clickEvent.initEvent ('click', true, true);
    jNode[0].dispatchEvent (clickEvent);
}

/==UserScript==
//@name(Nike auto buy！！！）脚本
//@包括http：//*/*
//@需要http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
//@需要https://gist.github.com/raw/2625891/waitForKeyElements.js
//@grant GM_addStyle
//==/UserScript==
/*-需要@grant指令来解决设计变更
在GM 1.0中引入。它会恢复沙箱。
*/
var okayToClickAddtoCart=false；
//--假设大小是标准标记或类似标记。。。
waitForKeyElements（“.selectBox标签[value='10']”），selectShoeSize）；
函数selectShoeSize（jNode）{
jNode.prop（'selected'，true）；
okayToClickAddtoCart=true；
}
WaitFork眼线（“.add to cart.nike”按钮），单击AddToCart）；
函数clickAddToCart（jNode）{
如果（！okayToClickAddtoCart）{
返回true；//--暂时不要单击。
}
var clickEvent=document.createEvent（'MouseEvents'）；
clickEvent.initEvent（'click'，true，true）；
jNode[0]。dispatchEvent（clickEvent）；
}
WaitForkEyements（“签出按钮”，单击签出按钮）；
功能单击检查按钮（jNode）{
var clickEvent=document.createEvent（'MouseEvents'）；
clickEvent.initEvent（'click'，true，true）；
jNode[0]。dispatchEvent（clickEvent）；
}

---

（如果目标页面被Nike删除或更改）

我希望快速概述如何使用Greasemonkey/Tampermonkey为这些页面和操作编写脚本，而不仅仅是修改问题的脚本

这些步骤是：

仔细记下您手动执行的操作。特别注意页面javascript添加/更改的元素，以及所需的步骤顺序（如果有）

使用Firebug和/或Firefox的inspector和/或Chrome的开发工具，为您将要读取或操作的所有元素确定CSS/jQuery选择器。使用Firebug尤其容易做到这一点

使用jQuery操作静态HTML。用于处理javascript（AJAX）添加或更改的节点。使用（Tampermonkey也支持，部分由Chrome用户脚本支持）执行任何跨域页面调用，或存储跨域页面集页面加载之间的任何值

---

---

具体示例：

例如，OP希望：（a）自动选择鞋码，（b）将鞋添加到购物车，以及（c）单击“结帐”按钮

这需要等待和/或单击五（5）个页面元素，如下所示：

使用Firebug（或类似工具）我们获得关键节点的HTML结构。例如，“大小”下拉列表中的HTML如下所示：

<div class="size-quantity">
    <span class="sizeDropdown selectBox-open">
        ...
        <label class="dropdown-label selectBox-label-showing">SIZE</label>
        ...
        <a class="selectBox size-dropdown mediumSelect footwear selectBox-dropdown" ...>
            ...
        </a>
    </span>
</div>

我们可以将其缩减为：

div.footwear form.add-to-cart-form span.sizeDropdown a.size-dropdown

对于一个合理的选择器，它很可能经受住琐碎的页面更改，并且不太可能触发不需要的页面/产品

~~~~~~~~~~~~~~
请注意，Firebug还帮助我们了解哪些事件与哪些事件相关，这在确定需要触发哪些事件时至关重要。例如，对于该节点，我看到：

该链接没有

href

，也没有侦听

单击事件。在这种情况下，我们必须触发
mousedown
（或
keydown
）

~~~~~~~~~~~~~~

对其他4个关键节点使用类似的过程，我们获得以下CSS/jQuery选择器：

节点1:div.shoots form.add-to-cart-form span.sizeDropdown a.size-dropdown
节点2:ul.selectBox-dropdown-menu li a:contains（'10'）
（但这需要额外检查）
节点3:div.shoots form.add-to-cart-form span.sizeDropdown a.selectBox span.selectBox标签：包含（‘（10）’）
节点4:div.shoots form.add-to-cart-form div.product-selections div.add-to-cart
节点5:div.mini-cart div.cart-item-data a.checkout-button:可见

最后，我们使用

waitforkyelments

将所需事件发送到关键节点，并按照适当的操作顺序进行排序

结果，完成的工作脚本是：

// ==UserScript==
// @name     _Nike auto-buy shoes(!!!) script
// @include  http://store.nike.com/*
// @include  https://store.nike.com/*
// @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==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/

var targetShoeSize  = "10";

//-- STEP 1:    Activate size drop-down.
waitForKeyElements (
    "div.footwear form.add-to-cart-form span.sizeDropdown a.size-dropdown",
    activateSizeDropdown
);
function activateSizeDropdown (jNode) {
    triggerMouseEvent (jNode[0], "mousedown");

    //-- Setup step 2.
    waitForKeyElements (
        "ul.selectBox-dropdown-menu li a:contains('" + targetShoeSize + "'):visible",
        selectDesiredShoeSize
    );
}

//-- STEP 2:    Select desired shoe size.
function selectDesiredShoeSize (jNode) {
    /*-- Because the selector for this node is vulnerable to false positives,
        we need an additional check here.
    */
    if ($.trim (jNode.text () ) === targetShoeSize) {
        //-- This node needs a triplex event
        triggerMouseEvent (jNode[0], "mouseover");
        triggerMouseEvent (jNode[0], "mousedown");
        triggerMouseEvent (jNode[0], "mouseup");

        //-- Setup steps 3 and 4.
        waitForKeyElements (
            "div.footwear form.add-to-cart-form span.sizeDropdown a.selectBox "
            + "span.selectBox-label:contains('(" + targetShoeSize + ")')",
            waitForShoeSizeDisplayAndAddToCart
        );
    }
}

//-- STEPS 3 and 4: Wait for shoe size display and add to cart.
function waitForShoeSizeDisplayAndAddToCart (jNode) {
    var addToCartButton = $(
        "div.footwear form.add-to-cart-form div.product-selections div.add-to-cart"
    );
    triggerMouseEvent (addToCartButton[0], "click");

    //-- Setup step 5.
    waitForKeyElements (
        "div.mini-cart div.cart-item-data a.checkout-button:visible",
        clickTheCheckoutButton
    );
}

//-- STEP 5:    Click the checkout button.
function clickTheCheckoutButton (jNode) {
    triggerMouseEvent (jNode[0], "click");

    //-- All done.  The checkout page should load.
}

function triggerMouseEvent (node, eventType) {
    var clickEvent = document.createEvent('MouseEvents');
    clickEvent.initEvent (eventType, true, true);
    node.dispatchEvent (clickEvent);
}

---

.selectBox标签[value='10']

是一个jQuery选择器。它显然与实际页面的HTML不匹配。禁用脚本，浏览到该页面，从Firefox（Ctrl+S）将该页面保存为“Targetpage.htm”，然后将该文件（

Targetpage.htm

）上载到您的问题并链接到粘贴库。然后我们可以帮助您调整jQuery选择器。这是targetpage，这是测试页面（targetpage）。好的，谢谢，我非常感谢。那么，一旦你找到了代码，它会在任何一个Nike sneaker页面上工作，还是只在那一个页面上工作？因为我希望它可以在每个nike.com sneaker页面上运行，而不需要知道预定义的HTML链接。它应该可以在每个鞋子页面上使用相同的基本HTML。另外，请注意，SO不是脚本编写服务。但是我注意到，我没有一个问题可以让初学者解释这种页面的过程。Brock你太棒了，它工作得完美无瑕！再说一次，如果你有贝宝，我很乐意捐赠给你！不客气。如果你愿意，你可以捐款或以我的名义捐款。Adblock guy也是一位慷慨且知识渊博的扩展开发讲师。

// ==UserScript==
// @name     _Nike auto-buy shoes(!!!) script
// @include  http://store.nike.com/*
// @include  https://store.nike.com/*
// @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==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/

var targetShoeSize  = "10";

//-- STEP 1:    Activate size drop-down.
waitForKeyElements (
    "div.footwear form.add-to-cart-form span.sizeDropdown a.size-dropdown",
    activateSizeDropdown
);
function activateSizeDropdown (jNode) {
    triggerMouseEvent (jNode[0], "mousedown");

    //-- Setup step 2.
    waitForKeyElements (
        "ul.selectBox-dropdown-menu li a:contains('" + targetShoeSize + "'):visible",
        selectDesiredShoeSize
    );
}

//-- STEP 2:    Select desired shoe size.
function selectDesiredShoeSize (jNode) {
    /*-- Because the selector for this node is vulnerable to false positives,
        we need an additional check here.
    */
    if ($.trim (jNode.text () ) === targetShoeSize) {
        //-- This node needs a triplex event
        triggerMouseEvent (jNode[0], "mouseover");
        triggerMouseEvent (jNode[0], "mousedown");
        triggerMouseEvent (jNode[0], "mouseup");

        //-- Setup steps 3 and 4.
        waitForKeyElements (
            "div.footwear form.add-to-cart-form span.sizeDropdown a.selectBox "
            + "span.selectBox-label:contains('(" + targetShoeSize + ")')",
            waitForShoeSizeDisplayAndAddToCart
        );
    }
}

//-- STEPS 3 and 4: Wait for shoe size display and add to cart.
function waitForShoeSizeDisplayAndAddToCart (jNode) {
    var addToCartButton = $(
        "div.footwear form.add-to-cart-form div.product-selections div.add-to-cart"
    );
    triggerMouseEvent (addToCartButton[0], "click");

    //-- Setup step 5.
    waitForKeyElements (
        "div.mini-cart div.cart-item-data a.checkout-button:visible",
        clickTheCheckoutButton
    );
}

//-- STEP 5:    Click the checkout button.
function clickTheCheckoutButton (jNode) {
    triggerMouseEvent (jNode[0], "click");

    //-- All done.  The checkout page should load.
}

function triggerMouseEvent (node, eventType) {
    var clickEvent = document.createEvent('MouseEvents');
    clickEvent.initEvent (eventType, true, true);
    node.dispatchEvent (clickEvent);
}