Question

我们的用户有一个显示其标题的表格。（如果重要的话，它们包含在数据表中）。我们的想法是简单地创建一个可以单击以切换发布的图像。以下代码会按预期更改图像，但不会更改类。

我也尝试过addclass / removeclass，但结果相同。我错过了一些明显的东西，还是我做错了什么？

<img class="title_publish" src="IsNotPublished.png">'
<img class="title_unpublish" src="IsPublished.png">


$('.title_publish').live('click', function () {
    this.src="IsPublished.png";
    this.toggleClass("title_publish");
    this.toggleClass("title_unpublish");
} );

$('.title_unpublish').live('click', function () {
    this.src="IsNotPublished.png";
    this.toggleClass="title_publish";
    this.toggleClass="title_unpublish";
} );

Answer 1

试试这个

$('.title_publish').live('click', function () {
    this.src="IsPublished.png";
    $(this).toggleClass("title_publish");
    $(this).toggleClass("title_unpublish");
} );

Answer 2

您可以在一个功能中处理两个按钮行为。

这是你如何做到的：

首先，toggleClass是一个函数，所以将它作为一个函数使用;顺便说一句，它可以占用几个空间分隔的类。

其次，为了始终在整个代码中使用jQuery，请使用$(this).attr('src', newsrc);来更改图像的来源。我还添加了一个条件，检查是否应将Not添加到图像名称中。我是这样做的：

$('.title_publish, .title_unpublish').live('click', function () {
        $(this).toggleClass("title_publish title_unpublish");
        $(this).attr("src", "Is" + ($(this).hasClass('title_publish') ? '' : 'Not') + "Published.png");
    } );

使用上面的内容代替您在代码中绑定的两次点击 - 这是一个始终处理两种按钮行为的代码。

Answer 3

如果要在两个类（title_publish和title_unpublish）之间切换，可以在两个类中使用切换类。例如：

$(this).toggleClass('title_publish title_unpublish');

jquery将通过您的点击知道需要显示哪个类。

请参阅demo here

如何切换可点击图像的类

3 个答案:

您可以在一个功能中处理两个按钮行为。