Question

嗨，我也很新，并且想知道是否有人可以帮助我使用这个“简单”棘手的代码，问题是我希望数字也像图片拼图那样移动，所以当你点击一个数字远离空盒子没有任何反应，但当你点击它旁边的数字时，数字将移动到空盒子的位置，盒子将移动到该号码的最后位置。这是我到目前为止：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>

Answer 1

检查以下代码。希望这就是你要找的东西：

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

当我点击靠近空框的数字时，它应该移动（初学者）

1 个答案: