Question

好吧，所以我试图在两个图像之间进行切换。一个是动画gif，另一个是jpg。基本上，客户想要他的产品功能的大量G9动画，但我想添加一个开关来打开和关闭它，因为它真的很忙。所以，我想知道我是否有一个类的所有图像，我可以设置一个切换来将所有图像的最后三个字符从gif更改为jpg，因为所有其余的src将是不同的。

这显然不起作用，但我希望你能遵循逻辑。

$('img.img-toggle').click(function() {
if () //If the image ends in .jpg
{
     //Somehow strip the attribute of .jpg
     //Somehow append the attribute to add .gif 
} else {
    //Somehow stip the attribute of .gif
    //Somehow append the attribute to add .jpg
}
});

有什么建议吗？如果我的逻辑是愚蠢的，那么另一种选择也会很好。我对此很陌生。我尝试了一些不同的东西，但无法弄明白。

提前致谢，凯文

Answer 1

我们可以从图像 src string 中抓取最后三到四个字符并进行比较。

$('img.img-toggle').click(function() {
    var ending = this.src.slice( -3 );

    switch( ending ) {
       case 'jpg': 
           this.src = this.src.replace( /jpg$/, 'gif' );
           break;
       case 'gif': 
           this.src = this.src.replace( /gif$/, 'jpg' );
           break;
    }
});

我使用switch/case以防将来可能有更多格式。

另一种选择是以类似

的方式使用jQuerys .toggle()方法

$('img.img-toggle').toggle(function() {
    this.src = this.src.replace( /jpg$/, 'gif' );
}, function() {
    this.src = this.src.replace( /gif$/, 'jpg' );
});

.toggle()会自动在您需要提供的两个功能之间切换。

Answer 2

试试这个：

$('img.img-toggle').click(function() {
    var $img = $(this);
    var src = $img.prop('src');
    if (src.match(/\.jpg$/)) {
        $img.prop('src', src.replace(/\.jpg$/, '.gif'));
    } else {
        $img.prop('src', src.replace(/\.gif$/, '.jpg'));
    }
});

Example fiddle

Answer 3

一种方法是做这样的事情......

$('img.img-toggle').click(function() {
    var src = $(this).attr("src");
    if (src.indexOf(".jpg") != -1) //If the image ends in .jpg
    {
        src = src.replace(".jpg", ".gif");
    } else {
        src = src.replace(".gif", ".jpg");
    }
    $(this).attr("src", src);
});

Answer 4

如果页面中有很多img.img-toggle个元素，最好使用event delegation，比监听每个元素的事件。

使用事件委派，您可以在共享父级上注册单个事件侦听器;这通常很敏感比注册大量不同的听众更好。

jQuery支持事件委派。

$("#a_common_ancestor").on("click", "img.img-toogle", handler);

考虑到这一点，我们现在在handler函数内写入登录信息。

function handler () {
  // `this` refers to the element that was clicked;
  // it is an image, so it has an `src` attribute.
  this.src = this.src.replace(/\.(jpg|gif)$/, function (_, capture1) {
    return capture1 === "jpg"
      ? ".gif"
      : ".jpg";
  });
}

Answer 5

如果你想在这里对所有图像运行这个操作，那就是。

$('img.img-toggle').click(function() {
    ( ".imgClass" ).each( function( ) {

        var src = $(this).prop( "src" );

        if( /\.jpg$/i.test( src ) ) {
            $(this).prop( "src", src.replace( /\.jpg$/, ".gif" ) );
        } else {
            $(this).prop( "src", src.replace( /\.gif$/, ".jpg" ) );
        }
    });
});

Answer 6

$('img.img-toggle').click(function() {
    src = $(this).attr('src');
    if (src.substr(src.length - 4) == ".jpg") //If the image ends in .jpg
    {
        src = src.replace(".jpg", ".gif");
    } else {
        src = src.replace(".gif", ".jpg");
    }
});

jquery更改src属性结束

6 个答案: