當我點擊一個數字接近空框，它應該移動（初學者）

嗨，我也很新這個，並想知道如果有人可以幫助我這個「簡單」棘手的代碼，事情是我想要的數字也會像圖片拼圖一樣移動，所以當您從空格中點擊數字時沒有任何反應，但是當您單擊旁邊的數字時，數字將移動到空格的位置，並且數字會移至數字的最後位置。這是我到目前爲止有：P當我點擊一個數字接近空框，它應該移動（初學者）

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <Style> 
 
     div.container { 
 
      display: flex; 
 
      height: 28vh; 
 
     } 
 
     div.BundTekst { 
 
      display: flex; 
 
      height: 28vh; 
 
     } 
 
     div.number { 
 
      color: White; 
 
      background-color: black; 
 
      margin: 10px; 
 
      border: 10px solid red; 
 
      display: flex; 
 
      flex: 1; 
 
      font-size: 500%; 
 
      text-align: center; 
 
      flex-direction: column; 
 
      justify-content: center; 
 
     } 
 
    </style> 
 
</head> 
 
<body> 
 
    <h1>Introduksjon til HTML, CSS og Javascript</h1> 
 

 
    <div class="container"> 
 
     <div id="A1" class="number" onclick="show(this)" >7</div> 
 
     <div id="A2" class="number" onclick="show(this)" >2</div> 
 
     <div id="A3" class="number" onclick="show(this)" >5</div> 
 
    </div> 
 

 
    <div class="container"> 
 
     <div id="B1" class="number" onclick="show(this)" >1</div> 
 
     <div id="B2" class="number" onclick="show(this)" ></div> 
 
     <div id="B3" class="number" onclick="show(this)" >3</div> 
 
    </div> 
 
\t \t 
 
    <div class="container"> 
 
     <div id="C1" class="number" onclick="show(this)" >6</div> 
 
     <div id="C2" class="number" onclick="show(this)" >9</div> 
 
     <div id="C3" class="number" onclick="show(this)" >8</div> 
 
    </div> 
 
\t \t 
 
    <script> 
 
     var counter = 0; 
 
     var lastClickedDiv; 
 

 
     function show(tag, alt1, alt2, alt3, alt4){ \t 
 
      if(alt1 && document.getElementById(alt2).innerHTML == 'Alt1') 
 
      { 
 
       tag.innerHTML = 'alt1'; 
 
      } 
 
      if(alt2 && document.getElementById(alt2).innerHTML == 'alt2') 
 
      { 
 
       tag.innerHTML = 'alt2'; 
 
      } 
 
      if(alt3 && document.getElementById(alt3).innerHTML == 'alt3') 
 
      { 
 
       tag.innerHTML = 'Alt3'; 
 
      } 
 
      if(alt4 && document.getElementById(alt4).innerHTML == 'alt4') 
 
      { 
 
       tag.innerHTML = 'Alt3'; 
 
      } 
 
     } 
 
    </script> 
 
</body> 
 

 
</html>

來源

2017-05-23 S3iman

語法錯誤運行的代碼片斷 – Lazyexpert

通過「移動」，你的意思動畫？ – PeterMader

在你的函數show中你定義了5個參數。你總是用一個參數來調用它。這當然不是JavaScript的問題，但您在這裏意味着什麼？ – cezar

檢查下面的代碼。希望這是你在找什麼：

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <style> 
 
     div.container { 
 
      display: flex; 
 
      height: 28vh; 
 
     } 
 
     div.BundTekst { 
 
      display: flex; 
 
      height: 28vh; 
 
     } 
 
     div.number { 
 
      color: White; 
 
      background-color: black; 
 
      margin: 10px; 
 
      border: 10px solid red; 
 
      display: flex; 
 
      flex: 1; 
 
      font-size: 500%; 
 
      text-align: center; 
 
      flex-direction: column; 
 
      justify-content: center; 
 
     } 
 
    </style> 
 
</head> 
 
<body> 
 
    <h1>Introduksjon til HTML, CSS og Javascript</h1> 
 

 
    <div class="container"> 
 
     <div id="A1" class="number">7</div> 
 
     <div id="A2" class="number">2</div> 
 
     <div id="A3" class="number">5</div> 
 
    </div> 
 

 
    <div class="container"> 
 
     <div id="B1" class="number">1</div> 
 
     <div id="B2" class="number empty"></div> 
 
     <div id="B3" class="number">3</div> 
 
    </div> 
 
\t \t 
 
    <div class="container"> 
 
     <div id="C1" class="number">6</div> 
 
     <div id="C2" class="number">9</div> 
 
     <div id="C3" class="number">8</div> 
 
    </div> 
 
\t \t 
 
    <script> 
 
     $(".number").click(function(){ 
 
      $(".empty").text($(this).text()).removeClass('empty'); 
 
      $(this).addClass('active').text('').addClass('empty'); 
 
     }); 
 
    </script> 
 
</body> 
 

 
</html>

來源

2017-05-23 12:34:23

當我點擊一個數字接近空框，它應該移動（初學者）

回答

相關問題