Question

认为这是鸡蛋或鸡蛋或关闭问题或其他我不知道的事情。当有onClick事件处理程序时，如何在JQuery中循环数字选择器值？

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

Answer 1

您可能想尝试一下：

$("[id^=q]").each(function () {
    $(this).click(function () {
        clearIt();
        var id = this.id.replace(/[^\d]/g, ''); 
        $("#item" + id).show();
    });
});

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

Answer 3

您可以使用jquery启动选择器。使用带有选择器的启动时，始终建议在元素驻留中使用上下文。但您也可以使用按钮的类名，并将其与单个选择器的click事件绑定。

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

Answer 4

您可以使用jquery each()：

SEE DEMO

$('[id^=q0]').each(function (i) {
    ++i;
    $(this).click(function () {
        $('#item0' + i).show();
    });
});

Answer 5

的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切换。

Answer 6

您应该尝试data- attributes。这样，您不需要任何字符串替换。只需将目标的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();
  });
})

Jquery遍历选择器并单击事件处理程序

6 个答案:

使用Id选择器

使用类选择器

HTML

脚本

的JavaScript

标记