Выбор ID + любое число в jquery

Я новичок в 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 работал как шарм.

для будущей ссылки на других, я делал этот код, чтобы сделать простой меню фильтра для картинной галереи. Таким образом, я мог бы Скрыть / показать фотографии определенных тематическое направление.

8
javascript jquery jquery-selectors string

4 ответов

Вы, кажется, хотите

$(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]") использует начинается с селектора для выбора всех элементов, идентификатор которых начинается с "filtro"
  • this.id.slice(6); принимает часть идентификатора, начиная с шестого символа. Может быть, это было бы яснее, как this.id.slice('filtro'.length) или this.id.substring('filtro'.length)
17

есть несколько хороших ответов на ваш первоначальный вопрос, но я хотел бы предложить потенциально более чистую альтернативу.

можно использовать data-* атрибуты вместо идентификаторов для выбора элементов. Например, ваши элементы могут выглядеть как

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

этот метод использован в много мест, включая рамки учредительства. Он упрощает извлечение вашего поведения в отдельный плагин, который не зависит от идентификаторов элементов. По мере усложнения приложения и увеличения количества поведений, привязанных к каждому элементу, каждый элемент будет выглядеть как

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

вместо

<a id="filtro-6_and_bar_and_foo" href="...">link</a>
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 . . .

  • как сказал dystroy, $("[id^=filtro]") выбирает все элементы, которые есть и id это начинается с "filtro".
  • $(this).prop("id") получает id текущего элемента (т. е. того, который только что был нажат)
  • $("." + $(this).prop("id")) принимает id и делает его частью селектора классов, добавив "."к началу. Это позволит выбрать все элементы, которые имеют class значение, которое совпадает с id значение элемент, который вы щелкнули.

Edit: - вы также можете использовать this.id (стандартный JavaScript) вместо $(this).prop("id"), что является просто способом JQuery выполнить то же самое.

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

LIVE DEMO

на ^ на [id^=filtro] - это "Начинается С" селектор, который будет match любой элемент
какой ID начинается с filtro

теперь давайте используем немного регулярного выражения, чтобы получить номер из идентификатора,
this.id.match(/\d+/); получает имя" this clicked element ID " и извлекает все числа d+
это число, чем используется, чтобы соответствовать вашему Селектор элементов класса.

0