Question

我有一个创建拼图的任务。我有12个div.Each div包含不同的值，最多12个。我有按钮就像现在开始。我想在每次点击立即开始按钮时更改我的div值。 DEMO

<div id="container">
        <div class="finder">
            <div class="block1">    <div id="one"><h1>1</h1></div>
            </div>
            <div class="block1">    <div id="two"><h1>2</h1></div>
            </div>
            <div class="block1">    <div id="three"><h1>3</h1></div>
            </div>
            <div class="block1">    <div id="four"><h1>4</h1></div>
            </div>
            <div class="block1">    <div id="five"><h1>5</h1></div>
            </div>
            <div class="block1">    <div id="six"><h1>6</h1></div>
            </div>
            <div class="block1">    <div id="seven"><h1>7</h1></div>
            </div>
            <div class="block1">    <div id="eight"><h1>8</h1></div>
            </div>
            <div class="block1">    <div id="nine"><h1>9</h1></div>
            </div>
            <div class="block1">    <div id="ten"><h1>10</h1></div>
            </div>
            <div class="block1">    <div id="eleven"><h1>11</h1></div>
            </div>
            <div class="block1">    <div id="twelve"><h1>12</h1></div>
            </div>

        </div>
        <div class="button">
            <div id="startButton">
                <button>Start</button>
            </div>
        </div>
    </div>

js是

 $(".finder").css('display','none');
      $("#startButton").click(function () {
        $(".finder").css('display','block');
      });
      var myDiv;
      $(".block1 div").on('click', function(){myDiv = $(this)});
      $(".block1 div").click(function () {
        if(myDiv.text() < 12)
        {
            myDiv.text(parseInt(myDiv.text())+1);
        }
        if(myDiv.text() > 12)
        {
            myDiv.text(1);
            myDiv.text(parseInt(myDiv.text())+1);
        }
      });

如何更改值？

Answer 1

我在下面提供了一个解决方案。您应该从中获得的关键要点之一是，当使用事件处理程序时，将为this分配事件在绑定函数中触发的元素。

要使用随机数填充框，请使用此代码

$(function() {
    //Array of values
    var values = [1,2,3,4,5,6,7,8,9,10,11,12];

    $( "input[type=submit], button" )
      .button()
      .click(function( event ) {
        event.preventDefault();
      });
      $(".finder").css('display','none');
      $("#startButton").click(function () {

          var tmpValues = values.slice(); //copy array


          $(".block1 div h1").each(function(){
               var r = Math.floor(Math.random()*tmpValues.length);
               //assign html to random array value that gets removed from array
               $(this).html(tmpValues.splice(r,1));   
          });
        $(".finder").css('display','block');
      });

      $(".block1 div").click(function () {

        //Instead of setting myDiv use $(this) which will refer to the div
        //We can grab the value of the H1 within the div using a scoped selector
        var value = parseInt($("h1",this).html());


        //Set the html of the clicked div
        //When setting the html we must include new value in h1 to maintain style
        //Ternary expression tidies up the logic, not sure why it sets to to 2 though?
        $(this).html("<h1>" + ((value > 12) ? 2: value+1) + "</h1>");
      });
  });

工作示例 http://jsfiddle.net/W55xc/3/

Answer 2

我没有完全明白这个问题，但我想你想为魔鬼生成随机数，对吗？使用Math.random()

$(".block1 div").each(function() {
  $(this).children('h1').text(Math.floor((Math.random() * 12) + 1)); // Generate a random number <-> [1, 12]
}

如何在每次单击时更改div的值

2 个答案: