jQueryで特定のclassを除外する方法

Question

プログラミング初心者です。

現在webサイトを作成中です。

以下のようなコードでサムネイルをクリックするとメイン画像が切り替わるというものを作成しました。

<div class="mainImage">
    <img id="menuaka0" src="syokigazo1.png">
</div>

<div class="thumbnails">
    <img class="thumbnails_1" id="menuaka1" src="syokigazo1.png" alt="menu１">
    <img class="thumbnails_2" id="menuaka2" src="syokigazo2.png" alt="menu２">
    <img class="thumbnails_3" id="menuaka3" src="syokigazo3.png" alt="menu３">
    <img class="thumbnails_4" id="menuaka4" src="syokigazo4.png" alt="menu4">
    <img class="change_exercise1" src="index3_changeexercise.png">
    <img class="change_exercise2" src="index3_changeexercise.png">
</div>

$('.thumbnails img').click(function () {
   var $thisImg = $(this).attr('src');
   var $thisAlt = $(this).attr('alt');
   $('.mainImage img').attr({src: $thisImg, alt: $thisAlt});
   $('.mainImage img').hide();
   $('.mainImage img').fadeIn("slow");
   });

このコード内でclassのchange_exercise1とchange_exerciseはこのサムネイルの入り変えから除外したいのですが、どのようにすればいいでしょうか？色々ググりながらやってもうまくいきませんでした。

アドバイスのほどよろしくお願い申しげます。

Answer 1

not()を使ってみてください。

Comments

[akintat-2748]

not()までは行きついて
var $thisImg = $(this).attr('src');
を
var $thisImg = $("div:not(.change_exercise1)").attr('src');
に変更して実行して見たのですがすべての画像が切り替わらなくなってしまいます。
書き方が間違ってるのでしょうか？

[m.ts10806]

>not()までは行きついて
現在の質問内容ではそれは分かりません。
追記願います。

>に変更して実行して見たのですが
まず $("div:not(.change_exercise1)")　で想定の要素が得られるか見てみては？
console.log()で見れるはずです。

[akintat-2748]

ご意見ありがとうございました。無事に思ってた通りにできました！
まだまだ、勉強不足ですので解決できるよう頑張ります！

[m.ts10806]

解決されたのは良かったのですけど、先に私が質問に追記依頼してたはずなので、できればそちらを対応いただきたかったです。
質問内容は充実していればいるほど無用なやりとりが減ります。解決も早まります。コピペコードやエスパー待ちはなるべく避けましょう。

Answer 2

私もClass名を付加してグルーピングしてそれを対象にするほうがシンプルだと思いますが、
HTMLを変更できない事情があるなら、

not() と 前方一致セレクタ を使って、

$('.thumbnails img:not([class^="change_exercise"])').click(function () {

略・・・ 

});

Codepenサンプル

---

クラス名が thumbnails_ で始まる要素と考えれば、下記でもいいですね。
$('.thumbnails img[class^="thumbnails_"]')

Comments

[akintat-2748]

not() と 前方一致セレクタを使って実施したら思い通りにいけました。ありがとうございます。

class名をグルーピングする方法でも無事できました。ありがとうございます、勉強になりました！

Answer 3

除外するより、対象をclassなどでグルーピングするほうがよくないですか？

• codepen

Comments

[yambejp]

対象にthumbnailsクラスをつけておいて
$('.thumbnails img.thumbnails').on('click',function(){
$('.mainImage img').remove();
$('.mainImage').append($(this).clone(true).hide().fadeIn("slow"));
});

[akintat-2748]

ありがとうございます。グルーピングする方法でもできました！勉強になりました！