プログラム的にラベル/ラジオまたは火災イベントをクリックする

私はカスタムJavaScriptをページの先頭に挿入するuserscriptを書いています。簡単なピーシー

// ==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= "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')を発射したときです。クリック()し、赤い背景を適用するユーザ名を検出します。 「削除」ボタンも同様です。

元のサイトのボタンのコードは次のようになります。

<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">
    
    <input type="radio" id="form-0-status_I" name="form-0-status" value="I" checked="checked" class="ui-helper-hidden-accessible">
    
    <input type="radio" id="form-0-status_D" name="form-0-status" value="D" class="ui-helper-hidden-accessible">
    
</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" 

As you can see I am using jQuery's each() to loop though each <tr> tag on the page, and using some form of $(this) to make any necessary changes.

How can I have the delete button selected automatically when the ID for the label and input is dynamic? And how do I actually get the Deleted button to be clicked?

Also to clear up any confusion I am simply adding the AddApproved/AddInactive/AddDeleted class for tallying purposes.

I have yet to implement the counter for this, but I already know how I am going to make that work.

P.S. This is my first time using jQuery, so this is as much as a tool for my place of employment as it is a learning experience. If some of the code seems nOOby I do apologize.

Edit +

I have gone though and 'refactored' as suggested. I actually noticed a slight speed increase in processing all the table rows.

Also per suggestion I've added some form of '$('#form-'+i+'-status_D').trigger('click');' to my script. However when I save and run the script the delete button is not triggered when it should be. The default action for the Approve All (which I hijacked and turned into Scan + Detect) is still applied. I tried adding i.preventDefault(); But the dafault action is still executed.

New Code:

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

        });
});

Edit ++

Since Technically I do not need the Approve All functionality (which is why I hijacked it with my own click(function(){}) I tried adding $('#approve-all-button span').unbind('click'); Unfortunately after saving and refreshing the page, the original approve all functionality is still there. Stuck +1

Edit +++

I found my mistake there, I was still including the span tag from the line I copied and pasted it over from. When I removed span from the code $('#approve-all-button').unbind('click'); the original event is no longer called. All I need to figure out is how to manually click the buttons, programmatically that is.

0

2 答え

jQuery#トリガーをご覧ください。それはあなたが無事にイベントを起こすことができます。 :)

この場合、次のようになります。

$('#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)のようなことをしてから、jQueryのラッパーを何度もやり直す代わりに self を使用する必要があります。


あなたのコメントに基づいて、次の例の '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>
    Click Me
    <input type="radio" id="test">
    
  </body>
</html>
0
追加された
一般的には、それ以上は適用できないコードを取り除くべきです。なぜなら、実際のクエストが何であるかを知ることは難しいからです。あなたがもっと助けを求めたいのであれば、あなたはあなたの質問に恩恵を払うことができます(あなたが新しいユーザーであるから可能ではないかもしれませんが)。
追加された 著者 Joel Meador,
私がこれを間違ってやっていると私は謝罪します。初めてのstackoverflowのユーザー。私は編集+それを質問の最初のページに戻した後、私の質問にバンプする必要がありますか?
追加された 著者 Aaron Henderson,
それは私がそれがしたいと思っているように見えます。 .trigger( 'クリック')を発射するだけの問題です。
追加された 著者 Aaron Henderson,

Trigger won't work as I explained on the other question you asked. The other answer seems to be correct as you focused on Trigger only.

radio ボタンに関連付けられたJSコードがないようです。この場合、私はやります:

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

それだけで十分です。

0
追加された
どのバージョンのjQueryを使用していますか?
追加された 著者 Abdul Munim,
prop()関数はjQuery 1.6以降で利用できます。最新のjQueryの使用を検討してください
追加された 著者 Abdul Munim,
私はスクリプトにこれを置くと、その行が最初に実行されたときに実際に失敗します。いくつかのTry/Catchアラートを私に送ります "TypeError:Object#にはメソッド 'prop'がありません"
追加された 著者 Aaron Henderson,
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript