Question

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

我基本上在我的网站上有id "filtro" + "some number"的随机数量的链接，我想只写一个代码来点击其中的任何一个（后来会影响同一个类的“filtro” “+”一些数字“）。

例如：点击“＃filtro3”，在“.filtro3”上执行某些操作。

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

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

有什么想法吗？谢谢!!

Ps。：这是我的第一个问题，如果我犯了任何错误，我会道歉。

解决。 dystroy的解决方案就像一个魅力。

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

Answer 1

你似乎想要

$(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 selector选择ID以“filtro”开头的所有元素
this.id.slice(6);在第六个字符后面开始id的一部分。也许它会更清晰this.id.slice('filtro'.length)或this.id.substring('filtro'.length)

Answer 2

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

您可以使用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>

Answer 3

如果单击元素的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的新手。。

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

编辑 - 您也可以使用this.id（标准JavaScript）代替$(this).prop("id")，这只是JQuery实现同样目标的方式。

Answer 4

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

<强> LIVE DEMO

^中的[id^=filtro]是“Starts With”选择器，它将match任何ID 以开头的元素< / em> filtro

现在让我们使用一些Regex来检索ID中的数字
this.id.match(/\d+/);获取“此点击的元素ID”名称并检索所有数字d+
该数字用于匹配您的CLASS元素选择器。

在jquery中选择ID +任何数字

4 个答案: