以编程方式单击“标签/广播"或“火灾事件" [英] Programmatically Click on Label/Radio or Fire Event
问题描述
我正在编写一个用户脚本，该脚本将自定义javascript注入页面的顶部.轻松自在
I'm writing a userscript that injects a custom javascript into the head of a page. Easy 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);
我注入的.js利用页面上已经使用的jQuery进行一些CSS更改以及自动执行一些平凡的任务.
The .js I inject makes use of the jQuery already being used on the page to make some css changes as well as automate some mundane tasks.
$(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()时，它检测到一个将RED背景应用到的用户名，脚本也同时单击了Delete(删除)按钮.
What I want to happen is when I fire $('#approve-all-button').click() and it detects a username that it applies the RED background to, for the script to also click the Delete "button" as well.
原始网站上按钮的代码如下:
The code on the original site for the buttons looks like:
<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，例如.
There are 100 iteration of the above button code. Each iterations set of IDs has a variable that increase by 1 for each iteration eg.
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)进行必要的更改.
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.
当标签和输入的ID为动态时，如何自动选择删除按钮?以及如何才能实际单击已删除"按钮?
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?
另外，为了消除任何混乱，我只是出于统计目的添加AddApproved/AddInactive/AddDeleted类.
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.这是我第一次使用jQuery，因此它既是学习工作，又是我工作场所的一种工具.如果某些代码似乎不好，我对此表示歉意.
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.
编辑+
我走了，按照建议重构"了.实际上，我注意到在处理所有表行时速度有所提高.
I have gone though and 'refactored' as suggested. I actually noticed a slight speed increase in processing all the table rows.
也根据建议，我添加了某种形式的'$('#form-'+ i +'-status_D').trigger('click');'到我的剧本.但是，当我保存并运行脚本时，应该不会触发删除按钮. 全部批准"(我劫持并变成扫描+检测")的默认操作仍然适用.我尝试添加i.preventDefault();但是dafault动作仍在执行.
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.
新代码:
$(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');
}
});
});
编辑++
由于从技术上讲，我不需要批准全部"功能(这就是为什么我用自己的click(function(){}劫持了它)的原因，所以我尝试添加$('#approve-all-button span').unbind(' click');不幸的是，保存并刷新页面后，原始批准的所有功能仍然存在.卡住+1
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
编辑+++
我在那里发现了错误，我仍然在复制行并将其粘贴到的行中包含span标签.当我从代码$('#approve-all-button').unbind('click');中删除跨度时原来的事件不再被调用.我需要弄清楚的是如何以编程方式手动单击按钮.
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.
推荐答案
Trigger将无法正常工作，因为我在您提出的另一个问题上做了解释.当您只关注Trigger时，另一个答案似乎是正确的.
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代码.在这种情况下，我会这样做:
Seems like you don't have any JS code associated with the radio buttons. In this case I would do:
$(_self).children('#form-'+i+'-status_D').prop("checked", true);
这就是您所需要的.
这篇关于以编程方式单击“标签/广播"或“火灾事件"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
