空のボックスに近い番号をクリックすると、移動する必要があります(初心者) -- javascript フィールド と jquery フィールド 関連 問題

When I click a number close to the empty box, it should move (Beginner)












0
vote

問題

日本語

こんにちは、これも私がこの「簡単な」トリッキーなコードで私を助けることができるかどうか疑問に思っていたのであったのであったのは、このことは絵のパズルのように数字が動くことができます。空のボックスが何も起こらず、その横にある番号をクリックすると、その数は空のボックスの場所に移動し、ボックスが数の最後の場所に移動します。これは私がこれまでのものであるものです: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>          <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>          <script>          var counter = 0;          var lastClickedDiv;            function show(tag, alt1, alt2, alt3, alt4){               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>  
英語

Hi I'm pretty new too this and were wondering if somebody could help me with this "easy" tricky code, the thing is I want the numbers too move like a picture puzzle, soo when you click a number away from the empty box nothing happens but when you click a number beside it, the number will move to the location of the empty box and the box wil move to the number's last location. This is what I have so far :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>          <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>          <script>          var counter = 0;          var lastClickedDiv;            function show(tag, alt1, alt2, alt3, alt4){               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>
</div
     
     
     

回答リスト

0
 
vote

下記のコードを確認してください。これがあなたが探しているものであることを願っています:

 <コード> iter()0  
 

Check the below code. Hope this is what you are looking for:

<!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>          <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>          <script>          $(".number").click(function(){            $(".empty").text($(this).text()).removeClass('empty');            $(this).addClass('active').text('').addClass('empty');          });      </script>  </body>    </html>
</div
 
 

関連する質問

2  OnClick HandlerをMake Linksのクリックを無視します  ( Make onclick handler ignore clicks on links ) 
ブロック要素のカスタムオンクロックハンドラ(jQueryの.click()メソッドを介して設定)。このブロック要素にはリンクを含めることができます。 これはかなり確信があるので、クリックしたリンクである場合(リンクが私のコードを実行せずに訪問されるように)ハン...

210  jQueryセレクタから$(これを)除外する方法は?  ( How can i exclude this from a jquery selector ) 
私はこのようなものを持っています: <事前> <コード> <div class="content"> <a href="#">A</a> </div> <div class="content"> <a href="#">B</a> </div>...

2  jQueryのAjaxForm  ( Ajaxform in jquery ) 
Ajaxformを使用しています。今私は問題に遭遇しました。私のアイデアは、ユーザーがユーザー名を入力したときに、誤ったユーザー名がユーザーにメッセージを報告する必要があります。 私のコードはうまくいっていますが、ユーザーに表示されたレポートメッセージの後、...

1279  jQueryでクッキーを設定/設定解除するにはどうすればよいですか。  ( How do i set unset a cookie with jquery ) 
jQueryを使用してCookieを設定して設定します。たとえば、 test という名前のクッキーを作成し、 1 ?に設定します。 ...

1  $$ jQueryでは、これは何ですか?  ( In jquery whats this used for ) 
誰かが書くだけの場合: <事前> <コード> $("#downloadTabs>div").each(function(el) { el.setStyle("display", "none"); el.removeCla...

1  JsonResultの問題  ( Jsonresult problem ) 
これを返しているActionResultがあります。 <事前> <コード> @output4 JavaScriptでは、そのaticationResultによって返される値は "{" isDeleted ":true}"です。 私は何をしていますか? 編...

11  スライド後のjQueryスライダコール機能  ( Jquery slider call function after slide ) 
私はWebアプリケーション上でスコアを設定するために使用しているjQuery Silderを持っています。ユーザーが送信ボタンをクリックしたが、クライアントはAjaxスタイルを更新するようになったままにするようにOrignallyにいました。 これは見つけられ...

0  jQuery、属性フィルタセレクタ、および正確に_which_要素をクリックした  ( Jquery attribute filter selectors and finding out exactly which element was c ) 
私はこのjqueryがうまく機能する <事前> <コード> $("li[id^='shop_id']").click( function () { alert("I clicked on id ??"); }); 'shop_id'でIDを持つ...

0  リスト項目でディスクを取り除く  ( Getting rid of disc in list item ) 
jQueryを使用してサイトを開発し、jQuery UIタブを作成しています。何らかの理由で、私のタブ(順序付けられていないリスト)は、OS XのFirefox 3を除くすべてのブラウザ(これまでにテスト済み)に弾丸を表示しています.Safari OS X、...

0  jQueryの$ .click()内のインデックス番号を取得する方法  ( How to get index number inside click of jquery ) 
<事前> <コード> $("span.ws_label").click(function() { }) セレクタ「span.ws_label」選択した5つの要素、 そのうちの1つをクリックしたとき、 実際にどれを知るか? 編集 I索引やそのIDを...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有