Question

我正在编写一个用户脚本，将自定义javascript注入页面的头部。容易腻话

// ==UserScript==
// @name    *** (BLOCKED DUE TO NDA)
// @namespace   *** (BLOCKED DUE TO NDA)
// @description *** (BLOCKED DUE TO NDA)
// @include *** (BLOCKED DUE TO NDA)
// @author  Aaron K. Henderson
// @version 1.0
// ==/UserScript==

var head= document.getElementsByTagName('head')[0];
var script= document.createElement('script');
script.type= 'text/javascript';
script.src= '***.js';
head.appendChild(script);

我注入的.js利用已经在页面上使用的jQuery来进行一些css更改以及自动执行一些平凡的任务。

$(document).ready(function() {
    // Rename Approve All Button
    $('#approve-all-button span').text('Scan + Detect');

    // The Magic
    $('#approve-all-button').click(function(i) { 
        var Current_Name = '';
        // Loop through TR
        $('tr').each(function(i) {
            if (i > 0) {

                // Get Current Username in Loop
                Current_Name = $(this).children('.username').text();
                // Apply Default Color to All (Green)
                $(this).css('background-color', '#0AFE47');
                // Apply Approved Class to All
                $(this).addClass('AddApproved');
                // Hide Creation Date / Last Login
                $(this).children('.nowrap').css('opacity','.1').css('background-color','white');
                // Get Current Username Length
                var nlen = Current_Name.length;

                // If Name Length is <= 3 or >= 15 Apply Color (Red)
                if (nlen <= 3) {
                    $(this).css('background-color','#FF7575');
                    $(this).addClass('AddDeleted');
                    $(this).removeClass('AddApproved');
                    $(this).removeClass('AddInactive');         
                }
                if (nlen >= 15) {
                    $(this).css('background-color','#FF7575');
                    $(this).addClass('AddDeleted');
                    $(this).removeClass('AddApproved'); 
                    $(this).removeClass('AddInactive'); 
                }

                var nDigits = 0;
                for ( var t=0; t<nlen; t++) {
                    var chr = Current_Name.charAt(t);
                    if (chr >= "0" && chr <= "9") nDigits++;
                }
                var charcount = nlen - nDigits;

                if ((nDigits >=6) || (charcount < 3) || (nDigits == nlen))  { 
                    $(this).css('background-color','#FF7575');
                    $(this).addClass('AddDeleted');
                    $(this).removeClass('AddApproved');
                    $(this).removeClass('AddInactive'); 
                }
            }
        });
    });
        // On Button Click, Change Background and Add/Remove class
        $('label').click(function(i) {
            var button = $(this).attr('for');
            var status =  button.substring(button.lastIndexOf('-') + 1);
            if (status == 'status_D') {
                $(this).closest('tr').css('background-color','#FF7575');
                $(this).addClass('AddDeleted');
                $(this).removeClass('AddApproved');
                $(this).removeClass('AddInactive');
            } else if (status == 'status_A') {
                $(this).closest('tr').css('background-color','#0AFE47');
                $(this).addClass('AddApproved');
                $(this).removeClass('AddInactive');
                $(this).removeClass('AddDeleted');
            } else if (status == 'status_I') {
                $(this).closest('tr').css('background-color','#0AFE47');
                $(this).addClass('AddInactive');
                $(this).removeClass('AddApproved');
                $(this).removeClass('AddDeleted');
            }

        });
});

我想要发生的是当我触发$('#approve-all-button').click()并且它检测到应用红色背景的用户名时，脚本也会点击删除“按钮”。

按钮原始网站上的代码如下所示：

<div class="jquery-buttongroup ui-buttonset">
    <input type="radio" id="form-0-status_A" name="form-0-status" value="A" class="ui-helper-hidden-accessible">
    <label for="form-0-status_A" aria-pressed="false" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left" role="button" aria-disabled="false">
        <span class="ui-button-text">Approved</span>
    </label>
    <input type="radio" id="form-0-status_I" name="form-0-status" value="I" checked="checked" class="ui-helper-hidden-accessible">
    <label for="form-0-status_I" class="ui-state-active ui-button ui-widget ui-state-default ui-button-text-only" aria-pressed="true" role="button" aria-disabled="false">
        <span class="ui-button-text">Inactive</span>
    </label>
    <input type="radio" id="form-0-status_D" name="form-0-status" value="D" class="ui-helper-hidden-accessible">
    <label for="form-0-status_D" aria-pressed="false" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-right" role="button" aria-disabled="false">
        <span class="ui-button-text">Deleted</span>
    </label>
</div>

上述按钮代码有100次迭代。每个迭代ID集都有一个变量，每次迭代都会增加1，例如

id="form-0-status_D" 
id="form-1-status_D" 
id="form-2-status_D" 
id="form-3-status_D" 
id="form-4-status_D"

正如您所看到的，我正在使用jQuery的each()来遍历页面上的每个<tr>标记，并使用某种形式的$(this)进行必要的更改。

当标签和输入的ID是动态时，如何自动选择删除按钮？我如何实际点击“已删除”按钮？

另外，为了清除任何混淆，我只是添加AddApproved/AddInactive/AddDeleted类来进行计数。

我还没有为此实施计数器，但我已经知道我将如何做到这一点。

P.S。这是我第一次使用jQuery，所以这对于我的工作场所来说也是一种工具，因为它是一种学习体验。如果有些代码看起来很糟糕，我会道歉。

编辑+

我已经走了，并按照建议'重构'。实际上我注意到处理所有表行的速度略有提高。

同样根据建议我添加了某种形式的'$（'＃form - '+ i +' - status_D'）。trigger（'click'）;'到我的剧本。但是，当我保存并运行脚本时，删除按钮不应该被触发。仍然应用了批准全部（我劫持并转换为扫描+检测）的默认操作。我尝试添加i.preventDefault（）;但是dafault行动仍在执行中。

新守则：

$(document).ready(function() {
    // Rename Approve All Button
    $('#approve-all-button span').text('Scan + Detect');

    // The Magic
    $('#approve-all-button').click(function(i) {
        i.preventDefault();
        var Current_Name = '';
        // Loop through TR
        $('tr').each(function(i) {
            if (i > 0) {
                var _self = $(this)
                // Get Current Username in Loop
                Current_Name = _self.children('.username').text();
                // Apply Default Color to All (Green)
                _self.css('background-color', '#0AFE47');
                // Apply Approved Class to All
                _self.addClass('AddApproved');
                // Hide Creation Date / Last Login
                _self.children('.nowrap').css('opacity','.1').css('background-color','white');
                // Get Current Username Length
                var nlen = Current_Name.length;

                // If Name Length is <= 3 or >= 15 Apply Color (Red)
                if ((nlen <= 3) || (nlen >= 15)){
                    _self.css('background-color','#FF7575').
                        addClass('AddDeleted').
                        removeClass('AddApproved').
                        removeClass('AddInactive');
                    $(_self).children('#form-'+i+'-status_D').trigger('click');
                }


                var nDigits = 0;
                for ( var t=0; t<nlen; t++) {
                    var chr = Current_Name.charAt(t);
                    if (chr >= "0" && chr <= "9") nDigits++;
                }
                var charcount = nlen - nDigits;

                if ((nDigits >=6) || (charcount < 3) || (nDigits == nlen))  { 
                    _self.css('background-color','#FF7575').
                        addClass('AddDeleted').
                        removeClass('AddApproved').
                        removeClass('AddInactive');
                    $(_self).children('#form-'+i+'-status_D').trigger('click');
                }
            }
        });
    });
        // On Button Click, Change Background and Add/Remove class
        $('label').click(function(i) {
            var _self = $(this)
            var button = _self.attr('for');
            var status =  button.substring(button.lastIndexOf('-') + 1);
            if (status == 'status_D') {
                _self.closest('tr').css('background-color','#FF7575').
                    addClass('AddDeleted').
                    removeClass('AddApproved').
                    removeClass('AddInactive');
            } else if (status == 'status_A') {
                _self.closest('tr').css('background-color','#0AFE47').
                    addClass('AddApproved').
                    removeClass('AddInactive').
                    removeClass('AddDeleted');
            } else if (status == 'status_I') {
                _self.closest('tr').css('background-color','#0AFE47').
                    addClass('AddInactive').
                    removeClass('AddApproved').
                    removeClass('AddDeleted');
            }

        });
});

编辑++

从技术上讲，我不需要Approve All功能（这就是我用自己的点击（function（）{}劫持它的原因）我尝试添加$（'＃approve-all-button span'）。unbind（'点击'）;不幸的是，在保存并刷新页面后，原始批准所有功能仍然存在。坚持+1

编辑+++

我在那里发现了我的错误，我仍然从我复制并粘贴的行中包含了span标记。当我从代码$（'＃approve-all-button'）中删除span时.unbind（'click'）;原始事件不再被调用。我需要弄清楚的是如何以编程方式手动点击按钮。

Answer 1

结帐jQuery#trigger。它会让你无缘无故地举起活动。：）

在这种情况下，它将类似于：

$('#form-'+i+'-status_D').trigger('click');

另外，我建议进行一些重构：

// If Name Length is <= 3 or >= 15 Apply Color (Red)
if (nlen <= 3 || nlen >= 15) {
  $(this).css('background-color','#FF7575').
    addClass('AddDeleted').
    removeClass('AddApproved').
    removeClass('AddInactive');
}

jQuery函数通常可以链接，因此您不需要（也不应该）重复执行$(this)。在最坏的情况下，您应该执行var self = $(this)之类的操作，然后使用self而不是一遍又一遍地重新运行jQuery的包装器。

根据您的评论，您点击以下示例中的“点击我”范围所获得的效果是您所追求的？

<html>
  <head>
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script type="text/javascript">
      $(function() {
        $('#click-me').click(function() {
          $('label[for=test]').trigger('click');
        });
      });
    </script>
  </head>
  <body>
    <span id="click-me">Click Me</span>
    <input type="radio" id="test">
    <label for="test">Deleted</label>
  </body>
</html>

Answer 2

Trigger无效，因为我在您提出的其他问题上解释过。另一个答案似乎是正确的，因为你只专注于Trigger。

好像你没有任何与radio按钮关联的JS代码。在这种情况下，我会这样做：

$(_self).children('#form-'+i+'-status_D').prop("checked", true);

这就是你所需要的一切。

以编程方式单击标签/收音机或火灾事件

2 个答案: