Question

我有一堆匹配id (#idA_1 and #idB_1, #idA_2 and #idB_2, etc)的div。在jquery中我想分配点击功能，这样当我点击#idA时，它会显示并隐藏#idB。基本上我想做到这一点：

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

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

Answer 1

当然，你可以这样做：

var num = 13;
addButtonListener(num);

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

Answer 2

尝试JQuery解决方案：

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

希望这有帮助。

Answer 3

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

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

然后，您可以在函数体内以更清晰的方式处理逻辑。

Answer 4

为了让它变得动态，而不必为每个数字重复代码，我建议如下：

首先，将一个类添加到您想要点击的所有div .clickable，然后使用所点击事件的ID，将A替换为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添加一个类。

Answer 5

您可以使用属性选择器开头来定位您想要的具有相应元素的ID。

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

然后在id下面使用split并使用Array.pop（）删除数据库的第一部分以获取下面的值。

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

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

5 个答案: