ถาม javascript หน่อยครับ กดรูปเเล้วให้ขึ้นที่ td ยังไงครับ

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา ถาม javascript หน่อยครับ กดรูปเเล้วให้ขึ้นที่ td ยังไงครับ

ถาม javascript หน่อยครับ กดรูปเเล้วให้ขึ้นที่ td ยังไงครับ
กดรูปหรือเลขด้านล่าง เเล้วใช้มันโชว์ตางรางเเรก กด3ทีขึ้นตารางเเรก กดอีก3ทีก็ให้ขึ้นตารางถัดไป



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- <link rel="stylesheet" type="text/css" href="style.css"> -->
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        table, th {
            border: 1px solid black;
            border-collapse: collapse;
            text-align: center;
            width: 100%;
        }
        td {
            border: 1px solid black;
            border-collapse: collapse;
            width: 40px;
            height: 40px;
 
        }
        .set1 {
            border: none;
            outline: none;
            padding: 10px 16px;
            background-color: #f1f1f1;
            cursor: pointer;
            font-size: 18px;
        }
 
        /* Style the active class, and buttons on mouse-over */
        .active, .set1:hover {
            background-color: #666;
            color: white;
        }
         
        div.f1{
            width: 1000px;
        }
    </style>
</head>
<body>
 
    <script>
         
        myFunction = i => $(".demo1 td:empty:first").html($(i).html());
    </script>
    <div >
     
        <table width="1000" class="demo1" style="background-color:#E6E6E6">
        <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
 
         
    </table>
</div>
<div class="f1">
        <table>
        <tbody>
            <tr>
                <td id="test1">
                    <table style="border: 0px;" >
                        <tbody>
                            <tr onclick="myFunction(this)" >
                                <td width="50%" class="set1" style="border: 0px;">1</td>
                                <td width="50%" class="set1" style="border: 0px;"><img width="50" height="50" src="img/number1.png"></td>
                            </tr>
                        </tbody>
                         
                    </table>
 
                </td>
                <td id="test2">
                    <table style="border: 0px;" >
                        <tbody>
                            <tr onclick="myFunction(this)" >
                                <td width="50%" class="set1" style="border: 0px;">2</td>
                                <td width="50%" class="set1" style="border: 0px;"><img width="50" height="50" src="img/number2.png"></td>
                            </tr>
                        </tbody>
                         
                    </table>
 
                </td>
                <td id="test1">
                    <table style="border: 0px;" >
                        <tbody>
                            <tr onclick="myFunction(this)" >
                                <td width="50%" class="set1" style="border: 0px;">3</td>
                                <td width="50%" class="set1" style="border: 0px;"><img width="50" height="50" src="img/number3.png"></td>
                            </tr>
                        </tbody>
                         
                    </table>
 
                </td>
                <td id="test1">
                    <table style="border: 0px;" >
                        <tbody>
                            <tr onclick="myFunction(this)" >
                                <td width="50%" class="set1" style="border: 0px;">4</td>
                                <td width="50%" class="set1" style="border: 0px;"><img width="50" height="50" src="img/number4.png"></td>
                            </tr>
                        </tbody>
                         
                    </table>
 
                </td>
                <td id="test1">
                    <table style="border: 0px;" >
                        <tbody>
                            <tr onclick="myFunction(this)" >
                                <td width="50%" class="set1" style="border: 0px;">5</td>
                                <td width="50%" class="set1" style="border: 0px;"><img width="50" height="50" src="img/number5.png"></td>
                            </tr>
                        </tbody>
                         
                    </table>
 
                </td>
                <td id="test1">
                    <table style="border: 0px;" >
                        <tbody>
                            <tr onclick="myFunction(this)" >
                                <td width="50%" class="set1" style="border: 0px;">6</td>
                                <td width="50%" class="set1" style="border: 0px;"><img width="50" height="50" src="img/number6.png"></td>
                            </tr>
                        </tbody>
                         
                    </table>
 
                </td>
            </tr>
        </tbody>
    </table>
    </div>
    </body>
    </html>



Golff Sinlapachai 24-10-2019 16:23:57

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )

 ความคิดเห็นที่ 1
 ศึกษาการจัดการ DOM ด้วย jQuery เป็นแนวทาง


ninenik 24-10-2019
 ความคิดเห็นที่ 2
ถามหน่อยครับ พอกด3ทีเเล้วมันเเสดงสีพื้นหลังที่เลข เเล้วให้เเสดงที่ผลด้านล่าง
ตอนนี้มันเเสดงผลเเต่ครั้งเเรก ครั้งต่อไปไม่เเสดงต้องทำยังไงครับ
อีกอย่างถ้าเลขซ้ากันก็ให้เเดสงด้วยครับเหมือนในรูป 554 เเต่มันเเสดงเเค่ 54




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <!-- <link rel="stylesheet" type="text/css" href="style.css"> -->
  <style>
    *{
      margin: 0;
      padding: 0;
   }
   table, th {
      border: 1px solid black;
      border-collapse: collapse;
      text-align: center;
      width: 100%;
   }
   td {
      border: 1px solid black;
      border-collapse: collapse;
      width: 50px;
      height: 25px;
 
   }
 
   .set1,.set2,.set3,.set4,.set5,.set6 {
      border: none;
      outline: none;
 
      background-color: #f1f1f1;
      cursor: pointer;
      font-size: 25px;
   }
 
 
   .active, .set1:hover {
      background-color: #666;
      color: black;
   }
   .active, .set2:hover {
      background-color: #666;
      color: black;
   }
   .active, .set3:hover {
      background-color: #666;
      color: black;
   }
   .active, .set4:hover {
      background-color: #666;
      color: black;
   }
   .active, .set5:hover {
      background-color: #666;
      color: black;
   }
   .active, .set6:hover {
      background-color: #666;
      color: black;
   }
 
   div.f1{
      width: 1000px;
   }
   div.f2{
      width: 1000px;
   }
   .set1.bg-color1{
      background: #FFFF00 !important;
   }
   .set2.bg-color1{
      background: #FFFF00 !important;
   }
   .set3.bg-color1{
      background: #FFFF00 !important;
   }
   .set4.bg-color1{
      background: #FFFF00 !important;
   }
   .set5.bg-color1{
      background: #FFFF00 !important;
   }
   .set6.bg-color1{
      background: #FFFF00 !important;
   }
</style>
</head>
<body>
 
  <script>
   var aaa = '';
   var sum1 = 0;
   var clicks  = 0;
   var clicksf = 0;
   //myFunction = i => $(".demo1 td:empty:first").html($(i).html());
 
   function clickCount()
   {
      clicks  +=1;   
      clicksf +=1;
 
   }
 
   function reset()
   {
      $(".set1").removeClass("bg-color1");
      $(".set2").removeClass("bg-color1");
      $(".set3").removeClass("bg-color1");
      $(".set4").removeClass("bg-color1");
      $(".set5").removeClass("bg-color1");
      $(".set6").removeClass("bg-color1");
       
      clicks=1;
 
      return;
   }
 
   $(function(){
      $(".set1,.set2,.set3,.set4,.set5,.set6").click(function (e) {
         clickCount();
         e.preventDefault();
         var img = $("img", this).attr("src");
         var numberValue = $(this).text();
          
          
         var is_bg_color1 = $(this).hasClass("bg-color1");
         //var is_bg_color2 = $(this).hasClass("bg-color1");
         //var is_bg_color3 = $(this).hasClass("bg-color1");
         // console.log(numberValue);
         // console.log(clicks);
         document.getElementById("clicks").innerHTML = clicksf;
 
 
         if(is_bg_color1){
           console.log("y");
         //var test1 = '<img/yes.png"';
         $.each($('.yes td'), function(index, item) {
            if (item.innerHTML === '') {
               item.innerHTML = '<img src=img/yes.png width=35 height=35>';
               return false;
            }
         });
 
         sum1++;
      }
      if(!is_bg_color1 && clicks%4==0){
        console.log("n");
         //var test1 = '<img/yes.png"';
         $.each($('.yes td'), function(index, item) {
            if (item.innerHTML === '') {
               item.innerHTML = '<img src=img/no.png width=35 height=35>';
               return false;
            }
         });
 
         //sum1++;
      }
 
      document.getElementById("sum1").innerHTML = sum1;
 
      if (numberValue=='') {
         $.each($('.demo1 td'), function(index, item) {
            if (item.innerHTML === '') {
               item.innerHTML = "<img src="" + img + ""width="20px" height="20px">";
               return false;
            }
         });
      }
      if (numberValue==1) {
        $.each($('.demo1 td'), function(index, item) {
         if (item.innerHTML === '') {
            item.innerHTML = '<img src=img/number1.png width=20 height=20>';
            return false;
         }
      });
     }else if(numberValue==2){
      $.each($('.demo1 td'), function(index, item) {
         if (item.innerHTML === '') {
            item.innerHTML = '<img src=img/number2.png width=20 height=20>';
            return false;
         }
      });
   }else if(numberValue==3){
      $.each($('.demo1 td'), function(index, item) {
         if (item.innerHTML === '') {
            item.innerHTML = '<img src=img/number3.png width=20 height=20>';
            return false;
         }
      });
   }else if(numberValue==4){
      $.each($('.demo1 td'), function(index, item) {
         if (item.innerHTML === '') {
            item.innerHTML = '<img src=img/number4.png width=20 height=20>';
            return false;
         }
      });
   }else if(numberValue==5){
      $.each($('.demo1 td'), function(index, item) {
         if (item.innerHTML === '') {
            item.innerHTML = '<img src=img/number5.png width=20 height=20>';
            return false;
         }
      });
   }else if(numberValue==6){
      $.each($('.demo1 td'), function(index, item) {
         if (item.innerHTML === '') {
            item.innerHTML = '<img src=img/number6.png width=20 height=20>';
            return false;
         }
      });
   }
   var randoms1 = [...Array(1)].map(() => Math.floor(Math.random() * 6)+1);
   var randoms2 = [...Array(1)].map(() => Math.floor(Math.random() * 6)+1);
   var randoms3 = [...Array(1)].map(() => Math.floor(Math.random() * 6)+1);
   if (clicks%3==0) {
      if (randoms1==1||randoms2==1||randoms3==1) {
         $(".set1").addClass("bg-color1");
         $.each($('.rich1 td'), function(index, item) {
            if (item.innerHTML === '') {
               item.innerHTML = '<img src=img/number1.png width=50 height=50>';
               return false;
            }
         });
      }
      if (randoms1==2||randoms2==2||randoms3==2) {
        $(".set2").addClass("bg-color1");
        $.each($('.rich1 td'), function(index, item) {
         if (item.innerHTML === '') {
            item.innerHTML = '<img src=img/number2.png width=50 height=50>';
            return false;
         }
      });
     }
     if (randoms1==3||randoms2==3||randoms3==3) {
        $(".set3").addClass("bg-color1");
        $.each($('.rich1 td'), function(index, item) {
         if (item.innerHTML === '') {
            item.innerHTML = '<img src=img/number3.png width=50 height=50>';
            return false;
         }
      });
     }
     if (randoms1==4||randoms2==4||randoms3==4) {
        $(".set4").addClass("bg-color1");
        $.each($('.rich1 td'), function(index, item) {
         if (item.innerHTML === '') {
            item.innerHTML = '<img src=img/number4.png width=50 height=50>';
            return false;
         }
      });
     }
     if (randoms1==5||randoms2==5||randoms3==5) {
        $(".set5").addClass("bg-color1");
        $.each($('.rich1 td'), function(index, item) {
         if (item.innerHTML === '') {
            item.innerHTML = '<img src=img/number5.png width=50 height=50>';
            return false;
         }
      });
     }
     if (randoms1==6||randoms2==6||randoms3==6) {
        $(".set6").addClass("bg-color1");
        $.each($('.rich1 td'), function(index, item) {
         if (item.innerHTML === '') {
            item.innerHTML = '<img src=img/number6.png width=50 height=50>';
            return false;
         }
      });
     }
 
     console.log(randoms1);
     console.log(randoms2);
     console.log(randoms3);
  }
  if (clicks%4==0) {
 
    
    reset();
 }
 
});
});
</script>
<div class="f2">
 
   <table  class="demo1" style="background-color:#E6E6E6">
      <tbody>
         <tr>
            <td><table style="border:0px;"><tbody><tr><td width="50" colspan="2"style="border:0px;"></td></tr><tr><td style="border:0px;"></td><td style="border:0px;"></td></tr></tbody></table></td>
            <td><table style="border:0px;"><tbody><tr><td colspan="2"style="border:0px;"></td></tr><tr><td style="border:0px;"></td><td style="border:0px;"></td></tr></tbody></table></td>
            <td><table style="border:0px;"><tbody><tr><td colspan="2"style="border:0px;"></td></tr><tr><td style="border:0px;"></td><td style="border:0px;"></td></tr></tbody></table></td>
            <td><table style="border:0px;"><tbody><tr><td colspan="2"style="border:0px;"></td></tr><tr><td style="border:0px;"></td><td style="border:0px;"></td></tr></tbody></table></td>
            <td><table style="border:0px;"><tbody><tr><td colspan="2"style="border:0px;"></td></tr><tr><td style="border:0px;"></td><td style="border:0px;"></td></tr></tbody></table></td>
            <td><table style="border:0px;"><tbody><tr><td colspan="2"style="border:0px;"></td></tr><tr><td style="border:0px;"></td><td style="border:0px;"></td></tr></tbody></table></td>
            <td><table style="border:0px;"><tbody><tr><td colspan="2"style="border:0px;"></td></tr><tr><td style="border:0px;"></td><td style="border:0px;"></td></tr></tbody></table></td>
            <td><table style="border:0px;"><tbody><tr><td colspan="2"style="border:0px;"></td></tr><tr><td style="border:0px;"></td><td style="border:0px;"></td></tr></tbody></table></td>
            <td><table style="border:0px;"><tbody><tr><td colspan="2"style="border:0px;"></td></tr><tr><td style="border:0px;"></td><td style="border:0px;"></td></tr></tbody></table></td>
            <td><table style="border:0px;"><tbody><tr><td colspan="2"style="border:0px;"></td></tr><tr><td style="border:0px;"></td><td style="border:0px;"></td></tr></tbody></table></td>
            <td><table style="border:0px;"><tbody><tr><td colspan="2"style="border:0px;"></td></tr><tr><td style="border:0px;"></td><td style="border:0px;"></td></tr></tbody></table></td>
            <td><table style="border:0px;"><tbody><tr><td colspan="2"style="border:0px;"></td></tr><tr><td style="border:0px;"></td><td style="border:0px;"></td></tr></tbody></table></td>
            <td><table style="border:0px;"><tbody><tr><td colspan="2"style="border:0px;"></td></tr><tr><td style="border:0px;"></td><td style="border:0px;"></td></tr></tbody></table></td>
            <td><table style="border:0px;"><tbody><tr><td colspan="2"style="border:0px;"></td></tr><tr><td style="border:0px;"></td><td style="border:0px;"></td></tr></tbody></table></td>
            <td><table style="border:0px;"><tbody><tr><td colspan="2"style="border:0px;"></td></tr><tr><td style="border:0px;"></td><td style="border:0px;"></td></tr></tbody></table></td>
            <td><table style="border:0px;"><tbody><tr><td colspan="2"style="border:0px;"></td></tr><tr><td style="border:0px;"></td><td style="border:0px;"></td></tr></tbody></table></td>
            <td><table style="border:0px;"><tbody><tr><td colspan="2"style="border:0px;"></td></tr><tr><td style="border:0px;"></td><td style="border:0px;"></td></tr></tbody></table></td>
            <td><table style="border:0px;"><tbody><tr><td colspan="2"style="border:0px;"></td></tr><tr><td style="border:0px;"></td><td style="border:0px;"></td></tr></tbody></table></td>
            <td><table style="border:0px;"><tbody><tr><td colspan="2"style="border:0px;"></td></tr><tr><td style="border:0px;"></td><td style="border:0px;"></td></tr></tbody></table></td>
            <td><table style="border:0px;"><tbody><tr><td colspan="2"style="border:0px;"></td></tr><tr><td style="border:0px;"></td><td style="border:0px;"></td></tr></tbody></table></td>
         </tr>
 
      </tbody>
   </table>
</div>
<br><br><br>
 
 
<div class="f1">
 <table >
    <tbody >
      <tr>
        <td class="one">
          <table style="border: 0px;" >
            <tbody>
              <tr >
                 <td width="50%" class="set1" style="border: 0px;">1</td>
                 <td width="50%" class="set1" style="border: 0px;"><img width="50" height="50" src="img/number1.png"></td>
              </tr>
           </tbody>
 
        </table>
 
     </td>
     <td class="two">
       <table style="border: 0px;" >
         <tbody>
           <tr  >
             <td width="50%" class="set2" style="border: 0px;">2</td>
             <td width="50%" class="set2" style="border: 0px;"><img width="50" height="50" src="img/number2.png"></td>
          </tr>
       </tbody>
 
    </table>
 
 </td>
 <td class="three">
    <table style="border: 0px;" >
      <tbody>
        <tr  >
          <td width="50%" class="set3" style="border: 0px;">3</td>
          <td width="50%" class="set3" style="border: 0px;"><img width="50" height="50" src="img/number3.png"></td>
       </tr>
    </tbody>
 
 </table>
 
</td>
<td class="four">
 <table style="border: 0px;" >
   <tbody>
     <tr  >
       <td width="50%" class="set4" style="border: 0px;">4</td>
       <td width="50%" class="set4" style="border: 0px;"><img width="50" height="50" src="img/number4.png"></td>
    </tr>
 </tbody>
 
</table>
 
</td>
<td class="five">
 <table style="border: 0px;" >
   <tbody>
     <tr  >
       <td width="50%" class="set5" style="border: 0px;">5</td>
       <td width="50%" class="set5" style="border: 0px;"><img width="50" height="50" src="img/number5.png"></td>
    </tr>
 </tbody>
</table>
</td>
 
<td class="six">
 <table style="border: 0px;" >
   <tbody>
     <tr  >
       <td width="50%" class="set6" style="border: 0px;">6</td>
       <td width="50%" class="set6" style="border: 0px;"><img width="50" height="50" src="img/number6.png"></td>
    </tr>
 </tbody>
 
</table>
 
</td>
</tr>
</tbody>
</table>
<br><br>
 
<table style="background-color:#E6E6E6;height: 50px" >
   <tr class="yes" >
      <td>ถูก</td>
      <td id="sum1">0</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
   </tr>
</table>
<br><br>
<table style="background-color:#E6E6E6;height: 60px" >
   <tr class="rich1" >
      <td >ผล</td>
      <td ></td>
      <td ></td>
      <td ></td>
       
   </tr>
</table>
 
</div>
<p>Clicks: <a id="clicks">0</a></p>
</body>
</html>


Golff Sinlapachai 28-10-2019 13:18
 ความคิดเห็นที่ 3
โค้ดอยู่บรรทัดที่218ครับ


Golff Sinlapachai 28-10-2019 13:19
 ความคิดเห็นที่ 4
มันต้องใช้ function ไหนครับอันนี้มันเเสดงเเต่ครั้งเเรก

1
2
3
4
5
6
$.each($('.rich1 td'), function(index, item) {
            if (item.innerHTML === '') {
               item.innerHTML = '<img src=img/number1.png width=50 height=50>';
               return false;
            }
         });


Golff Sinlapachai 29-10-2019 13:48
 ความคิดเห็นที่ 5
ไม่รู้ว่าทำอะไร แต่ลองศึกษาา css กับ html โดยเฉพาะพวก layout div flex รวมกับ jquery น่าจะช่วนให้ประยุกต์เพิ่มเติมได้

HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<ul class="list-01 cl1">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>
 
 
<ul class="list-01 mt-10">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
 
<ul class="list-01 mt-10 tg1">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>


CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
body {
  background: #CCCC;
  height: 100vh;
  margin: 0;
}
.mt-10{
  margin-top: 20px !important;
}
.cl1{
  cursor: pointer;
}
ul.list-01{
  display: flex;
  list-style: none;
  margin: 0;padding: 0;
}
ul.list-01 li{
  border:1px solid #666;
  list-style: none;
  margin: 0;padding: 0;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background: grey;
}
.circle{
  width: 40px;
  height: 40px;
  text-align: center;
  color: yellow;
  background-color: black;
  border-radius: 50%;
}


jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(function(){
  var a = 0;
  $(".cl1 li").click(function(){
    var num = $(this).text();
    a++;
    $.each($(".tg1 li"), function(index, item){
      if($(item).html()==""){
        var el = '<div class="circle">'+num+'</div>';
        $(item).html(el);
        return false;
      }
    });
  });
});

ตัวอย่าง DEMO

ninenik 29-10-2019
 ความคิดเห็นที่ 6
พอเรากดเลข3ครั้ง เลขจะขึ้นพื้นเหลือง เเล้วเเสดงเลขพื้นเหลืองที่ตารางด้านล่าง

เเต่มันเเสดงเเค่ครั้งเเรกเท่านั้น ทำยังไงให้มันเเสดงต่อไปเรื่อยๆครับ

ผมอยากให้มันเปลี่ยนตามเลขที่มีสีเหลืองครับ


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <!-- <link rel="stylesheet" type="text/css" href="style.css"> -->
 <style>
  *{
   margin: 0;
   padding: 0;
}
table, th {
   border: 1px solid black;
   border-collapse: collapse;
   text-align: center;
   width: 100%;
}
td {
   border: 1px solid black;
   border-collapse: collapse;
   width: 50px;
   height: 25px;
 
}
.set1,.set2,.set3,.set4,.set5,.set6 {
   border: none;
   outline: none;
 
   background-color: #f1f1f1;
   cursor: pointer;
   font-size: 25px;
}
.active, .set1:hover {
   background-color: #666;
   color: black;
}
.active, .set2:hover {
   background-color: #666;
   color: black;
}
.active, .set3:hover {
   background-color: #666;
   color: black;
}
.active, .set4:hover {
   background-color: #666;
   color: black;
}
.active, .set5:hover {
   background-color: #666;
   color: black;
}
.active, .set6:hover {
   background-color: #666;
   color: black;
}
 
div.f1{
   width: 1000px;
}
div.f2{
   width: 1000px;
}
.set1.bg-color1{
   background: #FFFF00 !important;
}
.set2.bg-color1{
   background: #FFFF00 !important;
}
.set3.bg-color1{
   background: #FFFF00 !important;
}
.set4.bg-color1{
   background: #FFFF00 !important;
}
.set5.bg-color1{
   background: #FFFF00 !important;
}
.set6.bg-color1{
   background: #FFFF00 !important;
}
</style>
</head>
<body>
 <script>
   var aaa = '';
   var sum1 = 0;
   var clicks  = 0;
   var clicksf = 0;
   function clickCount()
   {
      clicks  +=1;   
      clicksf +=1;
   }
   function reset()
   {
      $(".set1").removeClass("bg-color1");
      $(".set2").removeClass("bg-color1");
      $(".set3").removeClass("bg-color1");
      $(".set4").removeClass("bg-color1");
      $(".set5").removeClass("bg-color1");
      $(".set6").removeClass("bg-color1");
      clicks=1;
      return;
   }
   $(function(){
      $(".set1,.set2,.set3,.set4,.set5,.set6").click(function (e) {
         clickCount();
         e.preventDefault();
         var img = $("img", this).attr("src");
         var numberValue = $(this).text();
         var is_bg_color1 = $(this).hasClass("bg-color1");
         document.getElementById("clicks").innerHTML = clicksf;
   var randoms1 = [...Array(1)].map(() => Math.floor(Math.random() * 6)+1);
   var randoms2 = [...Array(1)].map(() => Math.floor(Math.random() * 6)+1);
   var randoms3 = [...Array(1)].map(() => Math.floor(Math.random() * 6)+1);
   if (clicks%3==0) {
      if (randoms1==1||randoms2==1||randoms3==1) {
         $(".set1").addClass("bg-color1");
         $.each($('.rich1 td'), function(index, item) {
            if (item.innerHTML === '') {
               item.innerHTML = '<img src=img/number1.png width=50 height=50>';
               return false;
            }
         });
      }
      if (randoms1==2||randoms2==2||randoms3==2) {
       $(".set2").addClass("bg-color1");
       $.each($('.rich1 td'), function(index, item) {
         if (item.innerHTML === '') {
            item.innerHTML = '<img src=img/number2.png width=50 height=50>';
            return false;
         }
      });
    }
    if (randoms1==3||randoms2==3||randoms3==3) {
       $(".set3").addClass("bg-color1");
       $.each($('.rich1 td'), function(index, item) {
         if (item.innerHTML === '') {
            item.innerHTML = '<img src=img/number3.png width=50 height=50>';
            return false;
         }
      });
    }
    if (randoms1==4||randoms2==4||randoms3==4) {
       $(".set4").addClass("bg-color1");
       $.each($('.rich1 td'), function(index, item) {
         if (item.innerHTML === '') {
            item.innerHTML = '<img src=img/number4.png width=50 height=50>';
            return false;
         }
      });
    }
    if (randoms1==5||randoms2==5||randoms3==5) {
       $(".set5").addClass("bg-color1");
       $.each($('.rich1 td'), function(index, item) {
         if (item.innerHTML === '') {
            item.innerHTML = '<img src=img/number5.png width=50 height=50>';
            return false;
         }
      });
    }
    if (randoms1==6||randoms2==6||randoms3==6) {
       $(".set6").addClass("bg-color1");
       $.each($('.rich1 td'), function(index, item) {
         if (item.innerHTML === '') {
            item.innerHTML = '<img src=img/number6.png width=50 height=50>';
            return false;
         }
      });
    }
     console.log(randoms1);
     console.log(randoms2);
     console.log(randoms3);
  }
  if (clicks%4==0) {
     reset();
  }
});
});
</script>
<br><br><br>
<div class="f1">
  <table >
     <tbody >
      <tr>
       <td class="one">
        <table style="border: 0px;" >
         <tbody>
          <tr >
             <td width="50%" class="set1" style="border: 0px;">1</td>
             <td width="50%" class="set1" style="border: 0px;"><img width="50" height="50" src="img/number1.png"></td>
          </tr>
       </tbody>
    </table>
 </td>
 <td class="two">
  <table style="border: 0px;" >
   <tbody>
    <tr  >
     <td width="50%" class="set2" style="border: 0px;">2</td>
     <td width="50%" class="set2" style="border: 0px;"><img width="50" height="50" src="img/number2.png"></td>
  </tr>
</tbody>
</table>
</td>
<td class="three">
  <table style="border: 0px;" >
   <tbody>
    <tr  >
     <td width="50%" class="set3" style="border: 0px;">3</td>
     <td width="50%" class="set3" style="border: 0px;"><img width="50" height="50" src="img/number3.png"></td>
  </tr>
</tbody>
</table>
</td>
<td class="four">
  <table style="border: 0px;" >
   <tbody>
    <tr  >
     <td width="50%" class="set4" style="border: 0px;">4</td>
     <td width="50%" class="set4" style="border: 0px;"><img width="50" height="50" src="img/number4.png"></td>
  </tr>
</tbody>
</table>
</td>
<td class="five">
  <table style="border: 0px;" >
   <tbody>
    <tr  >
     <td width="50%" class="set5" style="border: 0px;">5</td>
     <td width="50%" class="set5" style="border: 0px;"><img width="50" height="50" src="img/number5.png"></td>
  </tr>
</tbody>
</table>
</td>
<td class="six">
  <table style="border: 0px;" >
   <tbody>
    <tr  >
     <td width="50%" class="set6" style="border: 0px;">6</td>
     <td width="50%" class="set6" style="border: 0px;"><img width="50" height="50" src="img/number6.png"></td>
  </tr></tbody></table></td></tr></tbody></table><br><br><br><br>
<table style="background-color:#E6E6E6;height: 60px" >
   <tr class="rich1" >
      <td >ผล</td>
      <td ></td>
      <td ></td>
      <td ></td>
   </tr>
</table>
</div>
<p>Clicks: <a id="clicks">0</a></p>
</body>
</html>


Golff Sinlapachai 29-10-2019 16:27
 ความคิดเห็นที่ 7
ได้เเล้วครับถามอีกอย่างนะครับ
พอผมกด3ครั้งเเล้วมันขึ้นพื้นสีเหลืองตามรูป พอครั้งที่4กดเลขที่มีสีเหลืองมันจะขึ้นติ้กถูก หรือกดครั้ง4เเต่ไม่ได้กดเลขพื้นเหลืองจะติกผิด ตอนนี้เป็นเเบบนี้

ผมอยากได้เเบบนี้ พอกดครั้งที่4 5 6 หากกดเลขพื้นสีเหลืองตัวใดก็ได้ให้ติ้กถูก เช่นกด 3 3 1 ก็ติ้กถูก หรือ 4 5 6 ก็ติ้กถูก ถึงเเม้ว่าครั้งที่4หรือ5ไม่ได้กดเลขที่สีเหลืองเเต่ครั้งที่6กดเลขสีเหลืองก็ติ้กถูก

ถ้าจะให้ขึ้นติ้กผิดต้องไม่กดเลขที่มีพื้นเหลืองเลย ตอนกดครั้งที่4 5 6 

เราจะเช็คตอนที่กดครั้งที่ 4 5 6 ยังไงครับ 

https://playcode.io/461266
  


Golff Sinlapachai 30-10-2019 19:29
 ความคิดเห็นที่ 8
สร้างตัวแปร ขึ้นมานับค่า แล้วใช้เงื่อนไข ว่ามีค่ามากกว่า 1 ก็นำไปใช้งาน
ตัวแปรที่นำมานับค่า อาจจะรีเซ้ตคต่าเป็นเริ่มต้น เป็ฌน 0 เมื่อเข้าเงื่อนไขกดารนับค่าใหม่
ประยุกต์ให้กับการนำไปใช้งาน


ninenik 31-10-2019
 ความคิดเห็นที่ 9
งงมากครับพอจะไกด์ให้ได้มั้ยครับ


Golff Sinlapachai 31-10-2019 15:00
 ความคิดเห็นที่ 10
เงื่อนไข ก็คือการนับการกด ตัวที่มีพื้นหลังสีเหลือง ในครั้งที่ 4 5 6
มีตัวแปรมารับค่า เริ่มต้น 0 ถ้าคลิกที่มีพ้ืนหลังสีเหลือ ก็บวกค่าเพิ่มไป 1
ซึ่งถ้าคลิกที่ 3 ครั้งและเป็นสีเหล่ืองทั้งหมดก็จะเป้น 3 แต่เงื่อนไข ติ้กถูกคือ คลิกแค่ครั้งเดียวกที่เป็นสีเหลือง
ก็ใช้เงื่อนไขนี้ สำหรับติ้กถูก และใช้เงื่อนไขไม่ได้ติกสีหลืองเลือกเป็น 0 เป็นเงื่อนไขสำหรับติกผิด


ninenik 31-10-2019
1 2 Next







สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet
หรือ
Terms of Service | Privacy Policy
Author
2025 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ