在jquery中选择ID+任意数字

Selecting ID + any number in jquery

本文关键字：任意 数字 ID+ 选择 jquery      更新时间：2023-09-26

我是stackoverflow和jQuery的新手，所以我在制作一个简单的函数时遇到了一些麻烦。

我的网站上基本上有一个随机数目的id "filtro" + "some number"链接，我只想写一个代码来执行点击其中任何一个链接的操作（这稍后会影响到具有相同"filtro"+"一些数字"的类）。

例如：单击"#filttro3"，在".filtro3"上执行操作。

问题是，我不知道如何在jQuery中为"任意数字"编写字符串。我正在考虑做这样的事情：

$(function () {
    $("#" + "filtro" + SOME NUMBER).click(function () {
            //Do something with the element "." + "filtro" + SOME NUMBER
    });
});

有什么想法吗？非常感谢。

Ps.：这是我的第一个问题，如果我犯了任何错误，我深表歉意。

解决。戴斯特洛伊的解决方案很有魅力。

为了将来参考其他人，我编写此代码是为了为图片库制作一个简单的过滤器菜单。这样我就可以隐藏/显示某些主题的图片。

您似乎想要

$(function () {
    $("[id^=filtro]").click(function () {
        var num = this.id.slice(6);
        // if there is a risk of ambiguity, you might check here that +num==num
        var $elem = $('.filtro'+num);
        ...
    });
});

解释：

  • $("[id^=filtro]")使用starts with选择器来选择id以"filtro"开头的所有元素
  • this.id.slice(6);取从第六个字符之后开始的id部分。也许this.id.slice('filtro'.length)或this.id.substring('filtro'.length)会更清楚

您最初的问题有一些很好的答案，但我想建议一个可能更清洁的替代方案。

您可以使用data-*属性而不是ID来选择元素。例如，您的元素可能看起来像

<a data-filtro=6 href='...'>link</a>
<a data-filtro=7 href='...'>link</a>
<a data-filtro=8 href='...'>link</a>

然后可以使用$('[data-filtro]')选择这些元素，并在回调中使用$(this).data('filtro')。例如，

$("[data-filtro]").click(function() {
  var ele = $(this);
  var num = ele.data('filtro');
  // do whatever you want with num
});

这种技术在许多地方都有使用，包括Foundation框架。它可以更容易地将您的行为提取到一个不依赖于元素ID的单独插件中。随着应用程序变得越来越复杂，与每个元素相关的行为数量也在增加，每个元素看起来都像

<a data-filtro=6 data-foo data-bar href="...">link</a>

而不是

<a id="filtro-6_and_bar_and_foo" href="...">link</a>

如果单击的元素的id和您想要更改的元素的class相同，那么它应该像使用元素的id作为类选择器的输入一样简单：

使用您的代码作为基础：

$(function () {
    $("[id^=filtro]").click(function () {
        $("." + $(this).prop("id")).some_method_here();
    });
});

例如，我假设目标元素是<div>s。这将导致任何具有匹配类的<div>元素显示为红色文本：

$(function () {
    $("[id^=filtro]").click(function () {
        $("div",  "#filterTest").css("color", "#000000");
        $("." + $(this).prop("id")).css("color", "#FF0000");
    });
});

既然我看到你是JQuery的新手。

  • 正如dystroy所说，$("[id^=filtro]")选择所有具有和以"filtro"开头的id的元素
  • $(this).prop("id")获取当前元素（即刚刚点击的元素）的id
  • $("." + $(this).prop("id"))接受id，并通过在开头添加"."使其成为类选择器的一部分。这将选择class值与单击的元素的id值相同的所有元素

编辑：-您也可以使用this.id（标准JavaScript）来代替$(this).prop("id")，这只是JQuery实现相同功能的方法。

$("[id^=filtro]").click(function() {
     $('.someClassName'+ this.id.match(/'d+/) ).toggle();      
});

现场演示

[id^=filtro]中的^是"Starts With"选择器，它将match ID以filtro
开头的任何元素

现在让我们使用一些Regex从ID中检索号码，
this.id.match(/'d+/);获取"单击的元素ID"名称并检索所有数字d+
该数字用于匹配CLASS元素选择器。

相关文章：