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

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

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



<!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




<!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 ไหนครับอันนี้มันเเสดงเเต่ครั้งเเรก

$.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

<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

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

$(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ครั้ง เลขจะขึ้นพื้นเหลือง เเล้วเเสดงเลขพื้นเหลืองที่ตารางด้านล่าง

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

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


<!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
2024 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ