jQuery on('click')の要素の複数指定について

計算機を作っています。
表示部（text1）にクリックした要素を計算式として表示したいのですが、num_7-9だけでなくnum_4-6にも取得できるようにしたいです。侍ブログ
を参考にして以下コードを作ったのですが、テキストに何も表示されません。
何か問題点はありますでしょうか？

ちなみに $('.num_7-9').on('click',function(){以下略だとうまく行きます。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <title>keisanki</title>
6  <link rel="stylesheet" href="styles.css">
7</head>
8<body>
9  <div class="container">
10  <form>
11  <input type="text" id ="text1" name="text1" value="">
12   <div>
13    <div class="num_C-÷" id="C">C</div>
14    <div class="num_C-÷" id="kakko">()</div>
15    <div class="num_C-÷" id="C1">C1</div>
16    <div class="num_C-÷" id="waru">÷</div>
17   </div>
18   <div>
19    <div class="num_7-9" id="7">7</div>
20    <div class="num_7-9" id="8">8</div>
21    <div class="num_7-9" id="9">9</div>
22    <div class="num_C-÷" id="kakeru">×</div>
23   </div>
24   <div>
25    <div class="num_4-6" id="4">4</div>
26    <div class="num_4-6" id="5">5</div>
27    <div class="num_4-6" id="6">6</div>
28    <div class="num_C-÷" id="mainasu">−</div>
29   </div>
30   <div>
31    <div class="num_1-3" id="1">1</div>
32    <div class="num_1-3" id="2">2</div>
33    <div class="num_1-3" id="3">3</div>
34    <div class="num_C-÷" id="puls">+</div>
35   </div>
36   <div>
37    <div class="num_0-00" id="0">0</div>
38    <div class="num_0-00" id="00">00</div>
39    <div class="num_0-00" id=".">.</div>
40    <div class="num_C-÷" id="equal">=</div>
41   </div>
42 </form>
43 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
44 <script>
45 $(function(){
46   'use strict';
47   var $selected = '';
48   var text = document.getElementById('text1');
49   $('.num_7-9').on('click', '.num_4-6', function(){
50     if(text.value == ""){
51        $selected = $(this).text();
52        text.value = $selected;
53     }else {
54       text.value += $(this).text();
55     }
56
57   });
58
59});
60 </script>
61</body>
62</html>
63
64
65

CSS
1body{
2  font-size: 70px;
3  font-family: Arial, sans-serif;
4  margin-top: 0px;
5}
6.container{
7  width: 500px;
8  height: 500px;
9  margin: auto;
10  text-align: center;
11}
12#text1{
13  width: 500px;
14  height: 50px;
15  margin : 0 10px;
16  font-size: 30px;
17
18}
19.num_4-6, .num_7-9, .num_1-3, .num_0-00, .num_C-÷ {
20  display:inline-block;
21  border: 1px solid #ddd;
22  border-radius: 50%;
23  cursor: pointer;
24  width: 100px;
25  height: 100px;
26  line-height: 100px;
27  margin-top: 10px;
28}
29.selected{
30  background: #00aaff;
31  color: #fff;
32}
33#C, #kakko, #C1, #waru, #kakeru,  #puls, #mainasu{
34  color: #00aaff;
35}
36#equal{
37  background: #00aaff;
38  color: #fff;
39}
40

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

回答1件

ベストアンサー

こういう事でしょうか。

js
1// $('.num_7-9').on('click', '.num_4-6', function(){
2//                    ↓
3   $('.num_7-9, .num_4-6').on('click', function(){

投稿2019/03/25 14:32

kei344

総合スコア69430

GoGobuchiking

2019/03/25 14:40

ありがとうございました。できました。cssのクラスの複数指定に似てますね。 $('.num_7-9 || .num_4-6').on('click', function(){ や $('.num_7-9 && .num_4-6').on('click', function(){ も試したのですが、できなくて。本当に助かりました。

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