0

我们的用户有一个表格显示他们的标题。（如果重要，它们包含在数据表中）。这个想法是简单地拥有一张图片，他们可以点击它来切换是否发布。下面的代码确实按预期更改了图像，但没有更改 class。

我也尝试过 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";
} );
4

3 回答 3

2

试试这个

$('.title_publish').live('click', function () {
    this.src="IsPublished.png";
    $(this).toggleClass("title_publish");
    $(this).toggleClass("title_unpublish");
} );
于 2012-07-09T18:54:29.800 回答
1

您可以在一个函数中处理这两种按钮行为。

这是你如何做到的：

首先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");
    } );

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

于 2012-07-09T18:59:18.900 回答
0

如果您想在两个类（title_publish 和 title_unpublish）之间切换，您可以将切换类与这两个类一起使用。例如：

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

jquery 将通过单击知道需要显示哪个类。

在此处查看演示

于 2012-07-09T19:04:04.003 回答