0

ユーザーには、タイトルを示すテーブルがあります。（それが重要な場合、それらはデータテーブルに含まれています）。アイデアは、クリックして公開するかどうかを切り替えることができる画像を単純に持つことです。以下のコードはイメージを期待どおりに変更しますが、クラスは変更しません。

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

1 つの関数で両方のボタンの動作を処理できます。

方法は次のとおりです。

まず、toggleClass は関数なので、1 つの関数として使用します。ところで、スペースで区切られたいくつかのクラスを取ることができます。

次に、常にコード全体で 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");
    } );

コードでバインドした 2 回のクリックの代わりに上記を使用します。これは、両方のボタンの動作を常に処理する 1 つのコードです。

于 2012-07-09T18:59:18.900 に答える
0

2 つのクラス (title_publish と title_unpublish) を切り替えたい場合は、両方のクラスで toggle クラスを使用できます。例えば：

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

jquery は、クリックするだけで、表示する必要があるクラスを認識します。

ここでデモを見る

于 2012-07-09T19:04:04.003 に答える