Question

在过去的几个小时里，我一直在寻找一种方法来做到这一点并且一无所获。我试图找出一种方法来只更改属性中的子字符串。我想做的一个例子是改变

<a href="media/gallery/jtnp/JT.JPG" rel="shadowbox[JTNP]" title="Joshua tree" class="shaddowimages"><img id="JTth" src="media/gallery/jtnp/b_thum/JTthumb.JPG" alt="A small Joshua tree"></a>

到

<a href="media/gallery/jtnp/JT.JPG" rel="shadowbox[JTNP]" title="Joshua tree" class="shaddowimages"><img id="JTth" src="media/gallery/jtnp/s_thum/JTthumb.JPG" alt="A small Joshua tree"></a>

这是我到目前为止的情况，但是当我尝试按下#changethumb按钮时没有任何反应。

$(document).ready(function() {

    var count = 0;

    $('#changethumb').click(function() {

        if (count === 0) {
            $('#shaddowimages img').each(function() {
                $(this).attr('src', $(this).attr('src').replace('b_', 's_'));
            });
            count = 1;
        } else {
            $('#shaddowimages img').each(function() {
            $(this).attr('src', $(this).attr('src').replace('s_', 'b_'));    
            });
        count = 0;
        }
    })
});

我可以手动更换每个src，但是有20多个图像，如果可以的话，我想要一种自动化方法。有什么帮助吗？

Answer 1

使用.attr( attributeName, function(index, attr) )

$('#shaddowimages img').attr('src', function (i, old) {
    return old.replace('b_', 's_');
});

或更好地使用.prop( propertyName, function(index, oldPropertyValue) )

$('#shaddowimages img').prop('src', function (i, old) {
    return old.replace('b_', 's_');
});

阅读.prop() vs .attr()

Answer 2

可以在attr内运行您的所有逻辑，这样您就不必在'if中重复代码

 $('#changethumb').click(function() {
    $('#shaddowimages img').attr('src', function (i, src) {
         var newSrc= count==1 ? src.replace('b_', 's_') : src.replace('s_', 'b_');
         count=  count == 1 ? 10 : 1;
          return  newSrc;
    });
 });

奇怪的是，count只有1或10.复制了你的代码，但没有意义

如何替换属性JQuery中的子字符串

2 个答案: