Question

我捎带this question，并希望在事件处理程序中使用此技术，该事件处理程序会查找＆＃39; has class＆＃39;。

目标是在带有图标/图像的菜单栏中显示它。

到目前为止，我无法在以下代码中找到该错误：

$('.className').click(function(){
    $('.className').removeClass('activeDesignation');
    $(this).addClass('activeDesignation');
    if ( $('.className').hasClass('activeDesignation')){
            $(this).attr("src").replace(".png", "[suffix].png");
    };
});

一般语法似乎没问题，因为以下工作原理：

$('.className').click(function(){
    $('.className').removeClass('activeDesignation');
    $(this).addClass('activeDesignation');
    if ( $('.className').hasClass('activeDesignation')){
            $(this).hide('slow');
    };
});

这里不知所措

Answer 1

$(this).attr("src").replace(".png", "[suffix].png");

这将成功地将字符串替换为您希望永远不会将其重新分配回图像源的值。

$(this).attr("src", $(this).attr("src").replace(".png", "[suffix].png"));

正如问题中的两条评论指出，如果检查是毫无意义的

$('.className').click(function(){
    $('.className').removeClass('activeDesignation');
    $(this).addClass('activeDesignation')
           .attr("src", $(this).attr("src").replace(".png", "[suffix].png"));
});

Answer 2

您要从所有activeDesignation元素中移除className，然后检查$('.className').hasClass('activeDesignation')条件，这将始终为假。

您可以删除if条件并简单地替换图像扩展名。但是你需要存储这个替换，然后再分配它。

$('.className').click(function(){
    $('.className').removeClass('activeDesignation');
    $(this).addClass('activeDesignation');
    //if ( $('.className').hasClass('activeDesignation')){ // remove if 
        var newSRC = $(this).attr("src").replace(".png", "[suffix].png");//store new src
       $(this).attr("src",newSRC );
    //};
});

Answer 3

因此，您希望您点击的图像使用不同的图像（带有后缀的图像）并添加一些类。看起来你想要这样的东西：

JS（jQuery）：

$('.item').on('click', function() {
    $('.item').removeClass('active').each(function() {
        $(this).attr('src', $(this).attr('src').replace('[suffix].jpg','.jpg'));
    });
    $(this).addClass('active').attr('src', $(this).attr('src').replace('.jpg','[suffix].jpg'));
});

这是fiddle。

使用基于hasClass的jQuery更改图像

3 个答案: