Programmatisch Klik op Label/Radio of Fire Event

Ik schrijf een gebruikerscript dat een aangepast JavaScript in de kop van een pagina injecteert. Makkelijk

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

De .js I-injectie maakt gebruik van de jQuery die al op de pagina wordt gebruikt om een ​​aantal CSS-wijzigingen aan te brengen en een aantal alledaagse taken te automatiseren.

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

        });
});

Wat ik wil gebeuren, is wanneer ik $ aanraak ('# approve-all-button'). Klik op() en het detecteert een gebruikersnaam waarop het de RODE achtergrond toepast, zodat het script ook klikt de knop 'Verwijderen' ook.

De code op de originele site voor de knoppen ziet er als volgt uit:

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

Er zijn 100 iteratie van de bovenstaande knopcode. Elke reeks iteraties van ID's heeft een variabele die voor elke iteratie met 1 toeneemt.

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 antwoord

Bekijk jQuery # trigger . Het zal je toelaten om niks te doen. :)

In dit geval zou het iets zijn als:

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

Ik zou ook wat refactoring willen aanbevelen:

// 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-functies kunnen over het algemeen worden geketend, dus je hoeft (en zou niet) herhaaldelijk $ (dit) te doen. In het slechtste geval zou je iets als var self = $ (this) moeten doen en dan self gebruiken in plaats van de omslag van jQuery hier steeds opnieuw opnieuw uit te voeren.


Op basis van uw opmerkingen is het effect dat u krijgt als u in het volgende voorbeeld op de klik-klik-klik klikt, waarnaar u op zoek bent?

<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
toegevoegd
Over het algemeen moet u elke code verwijderen die niet meer van toepassing is, omdat het moeilijk is om te bepalen wat de werkelijke qustion is. Als u meer hulp wilt, kunt u een bounty op uw vraag plaatsen (hoewel dit misschien niet mogelijk is omdat u een nieuwe gebruiker bent), of u kunt het een andere vraag stellen.
toegevoegd de auteur Joel Meador, de bron
Ik verontschuldig me als ik dit verkeerd doe. Eerste gebruiker van stackoverloop. Moet ik mijn vragen stoten nadat ik ze heb bewerkt + naar de eerste pagina met vragen?
toegevoegd de auteur Aaron Henderson, de bron
Dat lijkt te zijn wat ik wil dat het doet. Het is gewoon een kwestie van .trigger ('klik') om te vuren.
toegevoegd de auteur Aaron Henderson, de bron

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.

Het lijkt erop dat u geen JS-code hebt gekoppeld aan de radio -knoppen. In dit geval zou ik doen:

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

Dat is alles wat je nodig hebt.

0
toegevoegd
welke versie van jQuery gebruikt u?
toegevoegd de auteur Abdul Munim, de bron
de functie prop() is beschikbaar in jQuery 1.6+. Overweeg het gebruik van de nieuwste jQuery
toegevoegd de auteur Abdul Munim, de bron
Wanneer ik dit in het script zet mislukt eigenlijk de eerste keer dat die regel wordt uitgevoerd. Het plaatsen van een aantal Try/Catch meldt mij dit "TypeError: Object # heeft geen methode 'prop'"
toegevoegd de auteur Aaron Henderson, de bron