jQueryにて、class名をクリック操作で変更したい

Question

前提・実現したいこと

jQueryにて、ボタンクリックをする度にclass属性の値を変更したいと思っているのですが、
以下のコードで試してみておりますがうまく動きません。
クリックでクラス名を変更する方法をご教授いただけますと幸いです。

試したこと

ボタン要素を「icon-heart」クラスで作成し、removeClassとaddClassでクリック時には「icon-heartFill」のクラス名に、クリックされていない状態の時は「icon-heart」　のままにしたいのですが、以下のコードでは動きませんでした。
原因となり得そうな部分の検討がつかず、どのように記述すると良いか教えていただきたいです。
よろしくお願いいたします。

<button type="button" aria-label="お気に入り" data-tooltip="お気に入り" aria-pressed="false" class="icon a-icon like-icon icon-heart a-icon-size_medium"></button>  

$(function(){
	$(".like-icon").click(function(){
		if($(this).attr("class")=="icon-heart"){
		$(this).removeClass("icon-heart").addClass("icon-heartFill");}
    else{
		$(this).removeClass("icon-heartFill").addClass("icon-heart");}
		});
});

Answer 1

(都合により削除)

Comments

[Yui_note]

ありがとうございます。
サンプルまで作成していただき大変ありがたいです。m
いただいたサンプルで実装したい動きはできたのですが、
ただtoggleを使う形ですと一度クラス名を削除してから追加が行われる様でして、
もともと入っているクラス名の順番が変更されてしまいます。
クラス名を一度削除することなく、クラス名のみを変更することは可能でしょうか..。

[maisumakun]

> もともと入っているクラス名の順番が変更されてしまいます。

クラスの順番はCSSやセレクタの動作に関係しません。よほど特殊な実装をしていない限り、クラスの順序を気にする必要はありません。

[Yui_note]

ありがとうございます。
確かに仰る通りだと思います。ただ機能的なところの意味合いではなく、クリック動作でクラス名のみを変更しているサイトがありまして、どうやって実装しているのか疑問に思いご質問させていただいた次第です。
実装されていたサイト：https://note.com/（ハートマークのボタンをクリックした際のクラス名変更の動き部分になります）
もう少し調べてみます！

[maisumakun]

attr('class')やprop('className')を使えば、クラス設定の文字列全体が取得できます。それの必要部分を書き換えて書き戻せば、位置もそのまま動かすことは可能です。

[Yui_note]

ありがとうございます。
attr('class')やprop('className')で書き換えできないか試してみます。m

[退会済みユーザー]

(都合により削除)

[退会済みユーザー]

(都合により削除)

[Yui_note]

> suwmn50799 さん
ありがとうございます！
いただいたコードでやりたいことができました！
replaceを使う方法とても勉強になります。m
「/\b」「\b/」こういったコードはエスケープシーケンスでしょうか、、バックスペースの余白も入れるんですね。やりたいことは完璧にできたのですが、ただせっかくいただいたコード解読できるところまでは至っていないので、しっかり理解して次に進みたいと思います！
本当にご親切にありがとうございました。m

[退会済みユーザー]

(都合により削除)

[Yui_note]

参考サイトまでご紹介いただきありがとうございます！
あのコードは単語境界を表していたんですね、とても勉強になります。m
ご紹介いただいた参考サイトで残りのコード部分も解読してみたいと思います。
本当にありがとうございました！m

Answer 2

.attr()　だと属性値を全部持ってきませんか？（要デバッグ）

「特定のクラスがある」なら.hasClass()を使ってください。

Comments

[Yui_note]

ありがとうございます。m