Question

所以我写了这个按钮并将其重新创建为内部跨度的链接。但是，我似乎无法让它适用于多个按钮。我最终需要复制并通过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;
  }

Answer 1

考虑使用第二个类名来标识您希望处理的元素，然后循环遍历它们：

<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”视为您当前在代码中使用的硬编码元素引用。

Answer 2

您可以使用

选择所有类型按钮的输入

$('input:button').each( function(index) {
    //do work here
});

并浏览页面上的每个按钮。

Answer 3

创建一个单独的函数，并使用选择器为任意数量的输入和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');

fiddle here

Answer 4

使用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();
});

Answer 5

一个简单的循环可以解决这个问题：

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

FIDDLE

使用多个选择器？

5 个答案: