javascript - 使用多个选择器？

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

score 2 · Accepted Answer

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

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

score 0 · Accepted Answer

您可以使用选择按钮类型的所有输入

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

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

score 0 · Accepted Answer

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

在这里摆弄

score 0 · Accepted Answer

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

查询：

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

score 0 · Accepted Answer

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

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

小提琴

javascript - 使用多个选择器？

5 回答 5

Related

Reference