1

好的，所以我正在尝试在两个图像之间进行切换。一个是动画 gif，另一个是 jpg。基本上，客户想要大量关于他的产品功能的动画 gif，但我想添加一个开关来打开和关闭它，因为它真的很忙。所以，我想知道我是否有一个类的所有图像，我是否可以设置一个切换来将所有图像的最后三个字符从 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
}
});​

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

在此先感谢，凯文

4

6 回答 6

3

我们可以从 images src 字符串中获取最后三个或四个字符并进行比较。

$('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()将自动在您需要提供的两个功能之间切换。

于 2012-12-20T16:58:11.550 回答
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'));
    }
});

示例小提琴

于 2012-12-20T16:58:37.917 回答
1

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

$('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);
});
于 2012-12-20T16:57:56.550 回答
1

如果页面中有很多img.img-toggle元素，最好使用事件委托，而不是在每个元素上进行事件监听。

使用事件委托，您可以在共享父项上注册单个事件侦听器；这通常比注册大量不同的听众要好得多。

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";
  });
}
于 2012-12-20T16:58:13.110 回答
1

如果您想对这里的所有图像运行此操作，它就是。

$('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" ) );
        }
    });
});
于 2012-12-20T17:04:49.487 回答
0 
$('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");
    }
});​
于 2012-12-20T17:01:10.470 回答