プログラムでラベル/ラジオまたは火災イベントをクリックしてください

Question

私はカスタム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); 

私はすでにいくつかのCSSの変更を行うだけでなく、いくつかの日常的なタスクを自動化するために、ページ上で使用されているのjQueryを利用した注入の.jsが。私は$('#approve-all-button').click()を発射し、それはスクリプトはまた、同様に削除「ボタン」をクリックすることが、赤の背景を適用することをユーザ名を検出したとき、私は起こるしたい何

$(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'); 
      } 

     }); 
}); 

です。上記のボタンのコードの100反復があります

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

：

ボタンの元のサイト上のコードは次のようになります。 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" 

あなたは、私がページ上の各<tr>タグかかわらループにjQueryのeach()を使用して、必要な変更を行うこと$(this)のいくつかのフォームを使用しています見ることができるように。

ラベルと入力のIDが動的である場合、自動的に削除ボタンを選択できますか？そして、どのように私は実際にクリックされる削除されたボタンを得るのですか？

また、混同を解消するために、集計目的でAddApproved/AddInactive/AddDeletedクラスを追加するだけです。

私はまだこのためのカウンタを実装していませんが、私はすでにその作業をどのように行うのか分かります。

P.S.これは初めてのjQueryを使用しているので、これは私の雇用の場としてのツールと同じくらい学習体験です。いくつかのコードがnOObyのように見えたら、私は謝ります。私も行ってと示唆されているように 'リファクタリング' を持つ

編集+

。私は実際にすべてのテーブル行を処理する際にわずかな速度の向上が見られました。

また、私は '$（'＃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'); 
      } 

     }); 
}); 

編集++私は、私は私自身のクリック（関数（）{}）Iとそれをハイジャック理由である（すべての機能を承認する必要はありません技術的にので

（ '＃approve-all-button span'）を追加しようとしました。unbind（ 'click'）;残念なことに、ページを保存して更新した後、元の機能はそのまま残ります。編集+++

立ち往生私はまだ私はコピーしてから、それを上に貼り付けラインからのspanタグを含めた、そこに私のミスを発見しました。コードからスパンを削除したとき$（ '＃approve-all-button'）。unbind（ 'click'）;元のイベントはもはや呼び出されません。私が理解する必要があるのは、ボタンをプログラムで手動でクリックする方法だけです。

Answer 1

チェックアウトjQuery#trigger。それはあなたが無事にイベントを起こすことができます。

// 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の関数は、一般的に連鎖させることができます 、あなたので、ドン：私はいくつかのリファクタリングを示唆し、また

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

---

：:)この場合

それはのようなものになるでしょう$(this)を繰り返し実行する必要がありません。最悪の場合は、var self = $(this)のような処理を行い、jQueryのラッパーを何度もやり直す代わりにselfを使用してください。あなたのコメントに基づいて

---

、次の例では、「私をクリックして」スパンをクリックしてから取得する効果は、あなたが後にしている何ですか？

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

これですべてが必要です。