JS　クリックイベントについて　WP

画像をクリックするとクリックした、画像にのみCSSが効き、別の画像をクリックしたらその画像にのみCSSが効くというのを作りたいのですがなかなかうまく行きません。わかる方教えてください。

    ```ここに言語を入力
    <div class="right_img thumbnails">
        <div class="small_right">
            <img width="115" height="115" src="02.png" alt="">
            <img width="115" height="115" src="02-1.png" alt="">
            <img width="115" height="115" src="02-1.png" alt="">
            <img width="115" height="115" src="02-1.png" alt="">
        </div>

    </div>
    ```

kei344

2017/09/29 08:38

バッククオート3つの前後には改行を入れてください。記入エリアの右部分あたりにリアルタイムに結果が表示されていると思うので、そこを見ながら調整してください。また、ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

行動規範の内容に同意します

回答2件

ベストアンサー

jQueryを使っていいならば以下のようなコードで出来ると思います。

javascript
1var cssClass = "classの名前";
2$('img').on('click',function(){
3    $('.'+cssClass').removeClass(cssClass);
4    $(this).addClass(cssClass);
5});

var cssClass = "classの名前"にはCSSで画像に効かせたいclassの名前を入れてください。

投稿2017/09/29 09:20

hota1024

総合スコア354

こんな感じでしょうか?

lang
1<!doctype html>
2<html>
3<head>
4<meta charset="utf-8">
5<title>クリックでCSSチェンジ</title>
6<style>
7.wrapper {
8  display: -webkit-box;
9  display: -moz-box;
10}
11.skyblue {
12  background-color: skyblue;
13  height: 100px;
14  width: 100px;
15  margin: 20px;
16}
17.mod {
18  border: solid 5px red;
19  margin: 15px;
20}
21</style>
22<script>
23window.addEventListener("load",function(){
24  var clicktargets = document.getElementsByClassName("normal");
25  Array.prototype.forEach.call(clicktargets,function(clktar){
26    clktar.addEventListener("click",function(){
27      if(clktar.classList.contains("mod")){
28          clktar.classList.remove("mod");
29      }else{
30        Array.prototype.forEach.call(clicktargets,function(clktar){
31          if(clktar.classList.contains("mod")) clktar.classList.remove("mod");
32        });
33        clktar.classList.add("mod");
34      }
35    },"false");
36  });
37},"false");
38</script>
39</head>
40<body>
41<div class="wrapper">
42  <div class="normal skyblue"></div>
43  <div class="normal skyblue"></div>
44  <div class="normal skyblue"></div>
45</div>
46<div class="wrapper">
47  <div class="normal skyblue"></div>
48  <div class="normal skyblue"></div>
49  <div class="normal skyblue"></div>
50</div>
51<div class="wrapper">
52  <div class="normal skyblue"></div>
53  <div class="normal skyblue"></div>
54  <div class="normal skyblue"></div>
55</div>
56</body>
57</html>