Символ подстановки jQuery в источнике изображения

Question

Я хотел бы изменить атрибут src изображения при клике, используя jQuery. Вот HTML-код:

<a href="#" class="view2">View 2</a>
<img src="images/shoe1a.jpg" class="sb-player" />

И в img src я хочу заменить «a» на «b», но моя проблема в том, что я хочу игнорировать «1», стоящую перед ним, так как это может выглядеть так же :

<img src="images/shoe2a.jpg" class="sb-player" />

Я получил это далеко с моим jQuery, и звездочка - то, где мне нужен подстановочный знак:

$(function() {
    $('.view2').click(function() {
        $('.sb-player').attr('src', 'images/shoe'+*+'b.jpg');
        return false;
    });
});

Есть ли определенный символ, который может быть подстановочным знаком для любого числа?

Answer 1

Просто .replace() весь конец строки src, заменив a.jpg на b.jpg.

Вы можете передать функцию в .attr().

Параметр i представляет текущую итерацию в наборе, а val - текущее значение. Возвращаемое значение представляет новое значение.

$(function() {
    $('.view2').click(function() {
        $('.sb-player').attr('src', function(i,val) { 
             return val.replace('a.jpg','b.jpg');
        });
        return false;
    });
});

Answer 2

Самый мощный способ сопоставить любую часть строки - использовать Регулярные выражения в javascript.

Может быть, таким образом вы сможете решить свою проблему:

$(function() {
    $('.view2').click(function() {
        var originalSrc = $('.sb-player').attr('src');
        $('.sb-player').attr('src', originalSrc.replace(/a\./,"b."));
        return false;
    });
});