如何在每次点击时改变div的值

-2

我有一个任务来创建一个谜题。我有12个div。每个div包含不同的值，直到12。我有像现在开始的按钮。我想改变我的每次点击现在开始按钮的div值。 DEMO 如何在每次点击时改变div的值

<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); 
     } 
     });

我怎样才能更改值？

来源

2013-07-02 Niths

您的代码似乎已经改变价值观，还是我失去了一些东西？ – silkfire

是的，它改变了..但它没有使用startnow按钮 – Niths

为什么你在一个事件处理程序中设置'myDiv'，但在另一个事件处理程序中使用它？我不认为他们会以什么顺序执行任何保证。 – Barmar

我在下面提供了一个解决方案。您应该从中获得的关键要点之一是，当使用事件处理程序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>"); 
     }); 
    });

工作实例

来源

2013-07-02 09:20:05

- 我的问题是，当我点击开始按钮，它不会有不同的值.. – Niths

@Nithu所以你只是想在框中的随机值？ –

yes..On点击开始按钮。用户可以通过点击开始选择新的游戏，然后将不会有相同的值。 – Niths

我没有相当的问题，但我想你想生成随机数为div的，对不对？使用Math.random()

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

来源

2013-07-02 09:14:16 Eric

如何在每次点击时改变div的值

回答

相关问题