所以我写了这个按钮并将其重新创建为内部跨度的链接。但是,我似乎无法让它适用于多个按钮。我最终需要复制并通过JS并输入复制整个脚本的不同类。必须有一种更简单的方法来做到这一点......有什么想法吗?
两个按钮的示例,以及迄今为止唯一的工作解决方案...... http://jsfiddle.net/En72J/5/
HTML
<div class="DIV_ONE">
<input type="button" class="INPUT_ONE" value="Today's Work Items 10" onclick="hAction_win1(document.win1,'CU_APPL_SUM_WRK_PERFORM_WEEKS', 0, 0, 'This Week\'s Items 10', false, true);" tabindex="16" name="CU_APPL_SUM_WRK_DATE_SEL_DAYS">
</div>
JQuery的
// Page First loads Input Button Wrapped in Div.
// Grab Input Buttons Numbers ( Last 2 Characters )
var number = $('.INPUT_ONE').val().substr(-2);
// Grab Input Buttons Text, Minus the Numbers.
var term = $('.INPUT_ONE').val().slice(0, -2);
// Grab Input Buttons OnClick Value
var script = $('.INPUT_ONE').attr("onclick");
// Append 'term' Float Left
$('.DIV_ONE').append('<span class="text">' + term + '</span>');
// Append 'number' Float Right
$('.DIV_ONE').append('<span class="number">' + number + '</span>');
// Wrap Both 'term' and 'number' in an <A> LINK and set OnClick with 'script' var.
var second = $('.DIV_ONE').wrapInner('<a href="#" onclick="' + script + '" class="button btn_style"></a>');
// Finally, Delete old Button. New <A> Link as Victor!
$('.INPUT_ONE').remove();
CSS
.btn_style {
border-bottom: 1px dotted #CCCCCC;
color: #666666;
display: block;
font-family: verdana;
font-size: 12px;
overflow: auto;
text-decoration: none;
}
.number {
background: none repeat scroll 0 0 #72716E;
color: #FFFFFF;
display: block;
float: right;
font-weight: bold;
padding: 4px;
position: relative;
width: 20px;
}
.text {
float: left;
padding: 4px;
}
答案 0 :(得分:2)
考虑使用第二个类名来标识您希望处理的元素,然后循环遍历它们:
<div class="DIV_ONE buttonMe">
<input type="button" class="INPUT_ONE" value="Today's Work Items 10" onclick="hAction_win1(document.win1,'CU_APPL_SUM_WRK_PERFORM_WEEKS', 0, 0, 'This Week\'s Items 10', false, true);" tabindex="16" name="CU_APPL_SUM_WRK_DATE_SEL_DAYS">
</div>
JS:
$('.buttonMe').each(function() {
current= $(this);
// at this point "current" points to the outer DIV
currentInput = $(this).find('input')
// then you can manipulate the current input
})
然后,您可以将“currentInput”视为您当前在代码中使用的硬编码元素引用。
答案 1 :(得分:0)
您可以使用
选择所有类型按钮的输入$('input:button').each( function(index) {
//do work here
});
并浏览页面上的每个按钮。
答案 2 :(得分:0)
创建一个单独的函数,并使用选择器为任意数量的输入和div调用该函数
function createlink(input, div) {
// Page First loads Input Button Wrapped in Div.
// Grab Input Buttons Numbers ( Last 2 Characters )
var number = $(input).val().substr(-2);
// Grab Input Buttons Text, Minus the Numbers.
var term = $(input).val().slice(0, -2);
// Grab Input Buttons OnClick Value
var script = $(input).attr("onclick");
// Append 'term' Float Left
$(div).append('<span class="text">' + term + '</span>');
// Append 'number' Float Right
$(div).append('<span class="number">' + number + '</span>');
// Wrap Both 'term' and 'number' in an <A> LINK and set OnClick with 'script' var.
var second = $(div).wrapInner('<a href="#" onclick="' + script + '" class="button btn_style"></a>');
// Finally, Delete old Button. New <A> Link as Victor!
$(input).remove();
}
createlink('.INPUT_ONE', '.DIV_ONE');
createlink('.INPUT_TWO', '.DIV_TWO');
答案 3 :(得分:0)
使用JQuery的$(this)
和JQuery的.each
。
这是一个工作小提琴:http://jsfiddle.net/4jqBj/
HTML:
<div class="item">
<input type="button" class="item_btn" value="Today's Work Items 10" tabindex="16" />
</div>
<div class="item">
<input type="button" class="item_btn" value="This Week's Items 22" tabindex="16" />
</div>
JQUERY:
$(".item_btn").each(function () {
var number = $(this).val().substr(-2);
var term = $(this).val().slice(0, -2);
$(this).parent().append('<span class="text">' + term + '</span>').append('<span class="number">' + number + '</span>');
$(this).parent().wrapInner('<a href="#" class="button btn_style"></a>');
$(this).remove();
});
答案 4 :(得分:0)
一个简单的循环可以解决这个问题:
$('input[class^="INPUT_"]').each(function() {
var n = $('<span />', {'class':'number', text : this.value.slice(-2)}),
t = $('<span />', {'class':'text', text : this.value.slice(0,-2)}),
a = $('<a />', {'class':'btn_style', onclick : $(this).attr('onclick')});
$(this).closest('div').append(a.append(n,t)).end().remove();
});