1. 首頁
  2. 問答
  3. 以編程方式點擊標籤/收音機或火災事件

以編程方式點擊標籤/收音機或火災事件

2011-11-12 20 views
0

我正在寫一個腳本，它將一個自定義JavaScript注入頁面的頭部。易peasy以編程方式點擊標籤/收音機或火災事件

// ==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);

我注入利用了jQuery已經被網頁上用來做一些CSS的變化，以及自動化一些普通任務的.js文件。

$(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()，並檢測到其應用紅色背景，對劇本也單擊Delete「按鈕」，以及用戶名。

在原始網站的按鈕的代碼如下所示：

<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，因此這對於我的工作場所來說是一種工具，因爲它是一種學習體驗。如果某些代碼似乎沒有，我確實道歉。

編輯+

我已經去了，'重構'建議。我實際上注意到在處理所有表格行時速度略有提高。 （'click'）;''（'＃form - '+ i +' - status_D'）。我的腳本。但是，當我保存並運行腳本時，刪除按鈕不會在觸發時觸發。全部批准（我被劫持並轉變爲掃描+檢測）的默認操作仍然適用。我試着添加i.preventDefault（）;但是默認行爲仍然執行。

新代碼：

$(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-button span'）。unbind（'click'）;不幸的是，在保存並刷新頁面之後，原始批准所有功能仍然存在。卡+1

編輯+++

我發現我錯在那裏，我還包括來自我複製並粘貼從它過線跨度標籤。當我從代碼$（'＃approve-all-button'）中刪除span。unbind（'click'）;原始事件不再被調用。我需要弄清楚的是如何以編程方式手動點擊按鈕。

來源

2011-11-12 Aaron Henderson

回答

0

結賬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的包裝器。

根據您的意見，在下面的示例中，您點擊「Click Me」的效果取決於您的想法？因爲我對你問其他問題解釋

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

來源

2011-11-12 03:05:33

+0

如果我這樣做不正確，我會道歉。第一次用戶的計算器。在我編輯+它們回到問題的第一頁後，我是否必須碰到我的問題？ –

+0

通常，您應該刪除不再適用的任何代碼，因爲很難分辨實際問題。 如果你想獲得更多的幫助，你可以在你的問題上給予賞金（儘管因爲你是一個新用戶，這可能是不可能的），或者把它作爲一個不同的問題。 –

+0

這似乎是我想要它做的。這只是獲取.trigger（'click'）來觸發的問題。 –

0

Trigger將無法​​正常工作。另一個答案似乎是正確的，因爲你只關注Trigger。

好像你沒有任何與radio按鈕相關的JS代碼。在這種情況下，我會這樣做：

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

這就是你所需要的。

來源

2011-11-12 06:01:57

+0

當我把這個腳本實際上在第一次運行時失敗了。把一些Try/Catch警告我這個「TypeError：Object＃ has no method'prop'」 –

+0

你使用的是哪個版本的jQuery？ –

+0

'prop（）'函數在jQuery 1.6+中可用。請考慮使用最新的jQuery –

相關問題

 相關問題