12

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

我基本上在我的网站上有一个随机数量的链接id "filtro" + "some number"，我只想编写一个代码来点击其中的任何一个（这将在以后影响具有相同“过滤器”+“某个数字”的类）。

例如：点击“#filtro3”，在“.filtro3”上做一些事情。

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

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

有任何想法吗？谢谢！！

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

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

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

4

4 回答 4

24

你似乎想要

$(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]")使用开头选择器选择所有 id 以“filtro”开头的元素
  • this.id.slice(6);从第 6 个字符开始获取 id 的一部分。也许它会更清楚，this.id.slice('filtro'.length)或者this.id.substring('filtro'.length)
于 2013-08-08T15:22:53.443 回答
3

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

您可以使用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>
于 2013-08-08T16:02:00.267 回答
2

如果被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]")选择所有id以“filtro”开头的元素。
  • $(this).prop("id")获取id当前元素的 （即，刚刚被点击的那个）
  • $("." + $(this).prop("id"))通过添加“。”将id其作为类选择器的一部分。到开始。这将选择所有值与您单击的元素class的值相同的元素。id

编辑： - 您也可以使用this.id（标准 JavaScript）代替$(this).prop("id")，这只是 JQuery 完成相同事情的方式。

于 2013-08-08T15:48:32.467 回答
0 
$("[id^=filtro]").click(function() {
     $('.someClassName'+ this.id.match(/\d+/) ).toggle();      
});

现场演示

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

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

于 2013-08-08T15:35:33.533 回答