Jquery 如何切换可点击图像的类别

我们的用户有一个表格显示他们的标题。（如果有必要，它们包含在数据表中）。这样做的目的是简单地创建一个图像，他们可以单击该图像来切换是否发布。下面的代码确实会按预期更改图像，但不会更改类

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

'
$（'.title_publish'）.live（'click'，函数（）{
this.src=“IsPublished.png”；
此.toggleClass（“标题发布”）；
本.toggleClass（“标题未发布”）；
} );
$（'.title_unpublish'）.live（'click'，函数（）{
this.src=“IsNotPublished.png”；
this.toggleClass=“title\u publish”；
this.toggleClass=“title\u unpublish”；
} );

试试这个

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

试试这个

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

您可以在一个函数中处理两个按钮的行为。 以下是您的操作方法：

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

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

您可以在一个函数中处理两个按钮行为。 以下是您的操作方法：

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

---

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

如果要在两个类（title\u publish和title\u unpublish）之间切换，可以将切换类与这两个类一起使用。例如：

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

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

---

请参见

如果要在两个类（title\u publish和title\u unpublish）之间切换，可以将切换类与这两个类一起使用。例如：

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

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

---

请参见

有趣的……这很有效。为什么在一种情况下需要$（），而在另一种情况下不需要$（）呢？toggleClass是jquery函数，所以不能用它调用，这是javascript对象。src是锚点的属性，javascript知道它。this.src=“IsPublished.png”；可以用jQuery$（this.attr（'src'，'IsPublished.png'）编写；您应该始终使用jQuery而不是mix/match。这将有助于解决未来的问题，而且这通常是更好的做法。请看我的回答是的，如果您阅读了注释，我会告诉您在jQuery中设置src的语法，但有时我们需要将它们混合在一起，例如如何使用jQuery获取html元素的属性列表？很有趣……这很有效。为什么在一种情况下需要$（），而在另一种情况下不需要$（）呢？toggleClass是jquery函数，所以不能用它调用，这是javascript对象。src是锚点的属性，javascript知道它。this.src=“IsPublished.png”；可以用jQuery$（this.attr（'src'，'IsPublished.png'）编写；您应该始终使用jQuery而不是mix/match。这将有助于解决未来的问题，而且这通常是更好的做法。请看我的回答是的，如果您阅读了注释，我告诉您在jQuery中设置src的语法，但有时我们需要混合使用它们，例如，如何使用jQuery获取html元素的属性列表？