Question

所以，我试图编写一个简单的滑动拼图并且真的卡住了。我有一个3x3平方的不同“值”

现在，我试图将数字移动到空白区域，反之亦然。

所以我的问题是我怎样才能以最简单的方式将我的'测试'文本更改为点击的div的值？

所有答案和提示都非常感谢

-Karlsen

编辑：

添加了完整的代码，现在我想了解更多：

          var counter = 0;
					var lastClickedDiv;


					function show(tag, alt1, alt2, alt3, alt4) {
					  if (alt1 && document.getElementById(alt1).innerHTML == '') {
					    document.getElementById(alt1).innerHTML = 'test';
					    tag.innerHTML = '';
					  }

					  if (alt2 && document.getElementById(alt2).innerHTML == '') {
					    document.getElementById(alt2).innerHTML = 'test1';
					    tag.innerHTML = '';
					  }

					  if (alt3 && document.getElementById(alt3).innerHTML == '') {
					    document.getElementById(alt3).innerHTML = 'test2';
					    tag.innerHTML = '';
					  }

					  if (alt4 && document.getElementById(alt4).innerHTML == '') {
					    document.getElementById(alt4).innerHTML = 'test3';
					    tag.innerHTML = '';
					  }
					}

		div.container {
			display: flex;
			height: 28vh;
		}
			div.number {
				color:	black;
				background-color: rgb(140,0,0);
				margin: 10px;
				border: 10px solid black;
				display: flex;
				flex: 1;
				font-size: 500%;
				text-align: center;
				flex-direction: column;
				justify-content: center;
			}

<!DOCTYPE html>
<html>
	<head>

	</head>
		<body>

			<H1> Sliding Puzzle </H1>

			<div class="container">
			  <div id="a1" class="number" onclick="show(this, 'a2', 'b1')">8</div>
			  <div id="a2" class="number" onclick="show(this, 'a1', 'a3', 'b2')">5</div>
			  <div id="a3" class="number" onclick="show(this, 'a2', 'b3')">4</div>
			</div>

			<div class="container">
			  <div id="b1" class="number" onclick="show(this, 'a1', 'b2', 'c1')">6</div>
			  <div id="b2" class="number" onclick="show(this, 'a2', 'b1', 'b3', 'c2')">7</div>
			  <div id="b3" class="number" onclick="show(this, 'a3', 'b2', 'c3')">2</div>
			</div>

			<div class="container">
			  <div id="c1" class="number" onclick="show(this, 'b1', 'c2')">1</div>
			  <div id="c2" class="number" onclick="show(this, 'c1', 'b2', 'c3')">3</div>
			  <div id="c3" class="number" onclick="show(this, 'c2', 'b3')"></div>
			</div>
		</body>
</html>

Answer 1

首先你在第4行的javascript中有错误

document.getElementById(alt1).innerHTML. = 'test';

没有＆＃34;。＆＃34;在innerHTML之后。

可能是问题，你无法运行你的JS

Answer 2

你有一个额外的“。”正如@DASH在javascript第4行建议的那样，你在HTML中的第4行缺少 ' 。

我添加了一些CSS，如果你不介意的话会更好看。

function show(tag, alt1, alt2, alt3, alt4) {
  if (alt1 && document.getElementById(alt1).innerHTML == '') {
    document.getElementById(alt1).innerHTML = 'test';
    tag.innerHTML = '';
  }

  if (alt2 && document.getElementById(alt2).innerHTML == '') {
    document.getElementById(alt2).innerHTML = 'test1';
    tag.innerHTML = '';
  }

  if (alt3 && document.getElementById(alt3).innerHTML == '') {
    document.getElementById(alt3).innerHTML = 'test2';
    tag.innerHTML = '';
  }

  if (alt4 && document.getElementById(alt4).innerHTML == '') {
    document.getElementById(alt4).innerHTML = 'test3';
    tag.innerHTML = '';
  }
}

.container {
  display: flex;
  width: 200px;
  background-color: beige;
  justify-content: space-around;
}

.number {
  flex-basis: 100%;
  height: 50px;
  margin: 5px;
  border: 1px solid black;
  cursor: pointer;
}

<div class="container">
  <div id="a1" class="number" onclick="show(this, 'a2', 'b1')">8</div>
  <div id="a2" class="number" onclick="show(this, 'a1', 'a3', 'b2')">5</div>
  <div id="a3" class="number" onclick="show(this, 'a2', 'b3')">4</div>
</div>

<div class="container">
  <div id="b1" class="number" onclick="show(this, 'a1', 'b2', 'c1')">6</div>
  <div id="b2" class="number" onclick="show(this, 'a2', 'b1', 'b3', 'c2')">7</div>
  <div id="b3" class="number" onclick="show(this, 'a3', 'b2', 'c3')">2</div>
</div>

<div class="container">
  <div id="c1" class="number" onclick="show(this, 'b1', 'c2')">1</div>
  <div id="c2" class="number" onclick="show(this, 'c1', 'b2', 'c3')">3</div>
  <div id="c3" class="number" onclick="show(this, 'c2', 'b3')"></div>
</div>

Answer 3

我想你想要这个，请尝试运行这段代码：

func GetSignIn(c *gin.Context) {
    // Get session from cookie. Check if email exists
    // redirect to Home page else show signin page.
    session := sessions.Default(c)
    if session.Get("email") != nil {
        fmt.Println(session.Get("email"))
        c.Redirect(302, "/")
    }
    c.HTML(200, "signin.html", "")
}

从jQuery更改为javascript

将div“value”检索到javascript

3 个答案: