1

认为这是一个先有鸡还是先有蛋的问题或关闭问题或我遗漏的其他问题。当有 onClick 事件处理程序时，如何循环遍历 JQuery 中的数字选择器值？

$("#q01").click(function() {
    clearIt();
    $("#item01").show();
}); 
$("#q02").click(function() {
    clearIt();
    $("#item02").show();
});
$("#q03").click(function() {
    clearIt();
    $("#item03").show();
});
4

6 回答 6

3

你可能想试试这个：

$("[id^=q]").each(function () {
    $(this).click(function () {
        clearIt();
        var id = this.id.replace(/[^\d]/g, ''); 
        $("#item" + id).show();
    });
});
于 2013-04-12T19:30:36.783 回答
2

很难准确地说，因为您的示例可能已简化。但是尝试使用更通用的选择器，而不是通过 ID 选择它们（您可以使用$('[id^="q"]')，但这并不是最佳实践）。您像使用类一样使用 ID 元素，这并不是真正id的用途。

如果你给它们一个class属性，比如class="q"按钮和class="item"目标，你可以这样做：

$('.q').each(function(index) {
    var targetItem = $('.item').eq(index);
    $(this).click(function() {
        clearIt();
        targetItem.show();
    });
});

但是在标记中指定每个可点击元素的目标会更容易、更安全和更好的做法：

<a href="#" class="p" target-index="01">p01</a>
<a href="#" class="p" target-index="02">p02</a>

<div class="item" item-index="01">item01</div>
<div class="item" item-index="02">item02</div>

那么他们在页面上的顺序和位置就无关紧要了。您可以直接选择它们：

var num = $(this).attr('target-index');
var targetItem = $('.item[item-index="' + num + '"]');

最后（也是我的首选建议），您可以将目标的 ID 直接放入按钮本身：

<a href="#" class="p" for="item01">p01</a>
<div id="item01">item01</div>

然后，您可以快速、安全地选择目标，无论其位置如何：

var targetItem = $('#' + $(this).attr('for'));

编辑1：

我的第一个片段对元素的顺序进行了假设，因为单击的元素与目标项目相关联的方式有很多。只有你知道标记的规则，所以只有你知道哪些假设会起作用。例如：

var targetItem = $('#' + $(this).attr('id').replace(/^q/, 'item'));
var targetItem = $(this).siblings('[id^="item"]');
var targetItem = $(this).children('[id^="item"]');
var targetItem = $(this).parents('[id^="item"]');
var targetItem = $(this).find('[id^="item"]');

如果您不使用target-index我建议的技术，您将不得不根据您对 HTML 的了解做出至少一些假设。

编辑2：

根据您尝试触发处理程序的评论，而不是改进事件绑定代码，您可以这样做：

//quick and dirty zero-padding function from http://stackoverflow.com/q/10073699/399649
var pad = function(num, size) {
  return (Math.pow(10, size) + ~~num).toString().substring(1);
};
for(var i = 1; i < $('[id^="q"]').length; i++) {
    var index = pad(i, 2);
    $('#q' + index).trigger('click');
}
于 2013-04-12T19:39:27.483 回答
1

您可以利用 jquery 从选择器开始。在使用以选择器开头时，它总是建议在元素驻留中使用上下文。但是您也可以为按钮使用类名，并将其与单击事件与单个选择器绑定。

$('[id^=q]','çontext').click(function(){...}

或者

$('input.classSelector',context).click(function(){...})

带有 ID 选择器

http://jsfiddle.net/Beffv/

function clearIt()
{
$('[id^=item]','#section').hide();
}
clearIt();
$('[id^=q]','#section').click(function(){

    clearIt();
  $('#item' + $(this).attr('id').replace('q',''),'#section').show();
});

使用类选择器

http://jsfiddle.net/vrVcL/

html

<div id="section">
<input id="q01" type="button" class="itemBtn" value="q1"/>
<input id="q02" type="button" class="itemBtn" value="q2"/>
<input id="q03" type="button" class="itemBtn" value="q3"/>

<div id="item01" class="itemDiv">test</div>
<div id="item02" class="itemDiv">test2</div>
<div id="item03" class="itemDiv">test3</div>
</div>

脚本

    function clearIt()
{
$('.itemDiv','#section').hide();
}
clearIt();
$('.itemBtn','#section').click(function(){
    clearIt();
    $('.itemDiv:nth-of-type(' + parseInt($(this).attr('id').replace('q','')) + ')','#section').show();
});
于 2013-04-12T19:29:41.703 回答
0

您可以使用 jquery each()：

看演示

$('[id^=q0]').each(function (i) {
    ++i;
    $(this).click(function () {
        $('#item0' + i).show();
    });
});
于 2013-04-12T19:30:56.147 回答
0

javascript

        var items= $('.item');
        $('.btn').click(function(){
           var num = $(this).attr('id').match(/\d+/ig)
           var item = $('#item'+num[0]+'.item');
           if(item.length){
              clearIt();
              item.show();
           }
        })

        function clearIt(){
           items.hide();
        }

标记

     <a id="q01" href="#" class="btn">Q01</a>
     <a id="q02" href="#" class="btn">Q02</a>
     <a id="q03" href="#" class="btn">Q03</a>

     <div id="item01" class="item">Item 01</div>
     <div id="item02" class="item">Item 02</div>
     <div id="item03" class="item">Item 03</div>

这样，您可以show/hide通过简单地删除类.btn或.item.

于 2013-04-12T19:31:59.490 回答
0

您应该尝试数据属性。这样，您不需要任何字符串替换。只需将目标的 id 保存在数据属性中，在此示例中我使用data-target. 您可以更改为您喜欢的任何名称。data-show , data-blah.

HTML

<button type="button" class="clear-it" data-target="item01">Clear it and 
show the target</button>

JavaScript

$('.clear-it').each(function() {
  clearIt();
  $(this).click(function() {
    var whereToGo = this.getAttribute('data-target');
    // or var whereToGo = this.dataset.target;
    // or var whereToGo = $(this).data('target');

    $("#" + whereToGo).show();
  });
})
于 2017-07-09T08:02:09.870 回答