将Id名称的一部分变为变量

我有一堆匹配ID为(#idA_1 and #idB_1, #idA_2 and #idB_2, etc)的div。在jQuery中我想分配点击功能，所以当我点击一个#idA它会显示和隐藏#idB。基本上我想使这个：将Id名称的一部分变为变量

$(".idA_x").click(function(){ 
    $("idB_x").toggleClass("hide") 
});

X是一个变量，使#idA和#idB匹配。我可以单独编写每一个，但是这会花费太多代码，是否有办法将id中的数字变成变量？

来源

2015-10-16 Pedro Coelho

$（ “＃IDA _” + X）。点击.....其中x是数 –

当然，你可以这样做：

var num = 13; 
addButtonListener(num); 

function addButtonListener(num){ 
    $("#idA_"+num).click(function(){ 
     $("#idB_"+num).toggleClass("hide") 
    }); 
}

来源

2015-10-16 16:52:46 juvian

$（ “＃IDA _” + X）。点击... –

@SandeepNayak他提到他有几个如此包装它在一个函数中是有用的 – juvian

尝试JQuery的解决方案：

var x = 1; 
$(".idA_" + x).click(function(){ 
    $(".idB_" + x).toggleClass("hide") 
});

希望这有助于。

来源

2015-10-16 16:53:45

所以，如果OPs有一堆div（可以说从1到20的范围），这个解决方案将工作通过复制该代码20次，对吧？ – taxicala

有很多方法可以实现这一点，但您可能需要的是创建一个共享CSS类，例如， .ids，以及事件监听器绑定到一个：

$('.ids').click(function() { 
    //... 
});

然后你就可以处理函数体内更清洁的方式你的逻辑。

来源

2015-10-16 16:53:57 Simone

为了使其动态，而不必重复你的号码中的每一个代码，我建议做如下：

首先，添加一个类的所有div的你想成为点击.clickable ，然后用点击事件的ID，为B替换，以选择元素，你怎么切换类：

$(".clickable").click(function(){ 
    var id = $(this).attr('id'); 
    $("#" + id.replace('A', 'B')).toggleClass("hide"); 
});

或者，您也可以选择所有div并使用包含通配符：

$("div[id*='idA_']").click(function(){ 
    var id = $(this).attr('id'); 
    $("#" + id.replace('A', 'B')).toggleClass("hide"); 
});

此解决方案不需要向所有可点击的div添加类。

来源

2015-10-16 16:58:35 taxicala

您可以使用属性选择器开始以目标您想要具有相应元素的id。

https://api.jquery.com/attribute-starts-with-selector/

然后，使用该ID分裂和施加Array.pop（）以除去所述阵列的所述第一部分中的understore后得到的值。

http://jsfiddle.net/up9h0903/

$("[id^='idA_']").click(function() { 
    var num = this.id.split("_").pop(); 
    $("#idB_" + num).toggleClass("hide") 
});

使用正则表达式将是你的其他选择从ID剥离的数量。

http://jsfiddle.net/up9h0903/1/

$("[id^='idA_']").click(function() { 
    var num = this.id.match(/\d+/g); 
    $("#idB_" + num).toggleClass("hide") 
});

来源

2015-10-16 17:05:56

将Id名称的一部分变为变量

回答

相关问题