jQuery show()　保守性上げるために

jQueryを勉強しています。

日本語の挨拶をクリックすると、それを英語で表示します。
クリックした挨拶以外の英語は非表示にします。

処理は実現できましたが、みての通りclick(function(){}の中身が無駄な処理が多いです。
挨拶の数が10個になれば、hide()を９回ずつかかないといけない・・・

多分、thisや配列を使えば、保守性が高いプログラムが作れると思うのですが。
解決策が思い浮かびません。

何かいい方法を教えていただけないでしょうか。

html
1<!DOCTYPE html>
2<html>
3<head>
4  <title>test</title>
5  <link rel="stylesheet" type="text/css" href="./test.css" />
6  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
7  <script src="test.js"></script>
8</head>
9<body>
10
11<div>英語に変えてみよう</div>
12<div>
13  <div id="button1">おはよう</div>
14  <div id="button2">こんにちは</div>
15  <div id="button3">こんばんは</div>
16</div><br>
17
18
19<div>
20  クリックした和英は：
21  <div id="eng1">good morning</div>
22  <div id="eng2">hello</div>
23  <div id="eng3">good night</div>
24</div>
25
26</body>
27</html>

JavaScript
1$(function(){ 
2
3  $('#eng1').hide();
4  $('#eng2').hide();
5  $('#eng3').hide();
6
7  $('#button1').click(function(){
8    $('#eng1').show();
9    $('#eng2').hide();
10    $('#eng3').hide();
11  });
12  $('#button2').click(function(){
13    $('#eng2').show();
14    $('#eng1').hide();
15    $('#eng3').hide();
16  });
17  $('#button3').click(function(){
18    $('#eng3').show();
19    $('#eng1').hide();
20    $('#eng2').hide();
21  });
22
23
24
25})

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

回答2件

ベストアンサー

操作したい要素に共通のクラスをつける
ボタンにdata属性を指定し、数値を指定する
数値を使って操作したい要素のIDを生成する
.not()や:not()を使って操作したい要素以外を一括で処理する

という感じでいかがでしょうか

投稿2021/02/05 09:32

tanat

総合スコア18713

chako_2007

2021/02/06 12:19

おっしゃる通りの方法で解決できました。ありがとうございます。m(_ _)m

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

自分ならメッセージを配列にして、押された要素番号で表示するテキストかえるかなーと。

html
1<!DOCTYPE html>
2<html>
3<head>
4  <title>test</title>
5  <link rel="stylesheet" type="text/css" href="./test.css" />
6  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
7  <script src="test.js"></script>
8</head>
9<body>
10
11<div>英語に変えてみよう</div>
12<div>
13  <button class="event">おはよう</button>
14  <button class="event">こんにちは</button>
15  <button class="event">こんばんは</button>
16</div><br>
17
18
19<div>
20  クリックした和英は：
21  <div id="eng"></div>
22</div>
23
24</body>
25</html>

javascript
1const english = ["good morning", "hello", "good evening"];
2
3let targets = document.getElementsByClassName("event");
4for(let i = 0; i < targets.length; i++){
5  targets[i].addEventListener("click",() => {
6        document.getElementById("eng").innerText = english[i];
7  }, false);
8}