Question

我试图制作一个功能，以隐藏相应数字的方框，但我不知道如何做到这一点。我试图找出如何做到这一点，但我提出的每一种方法都会导致错误。

我正在使用jQuery库和Bootstrap。

CSS：

.random {
    width: 100 px;
    height: 100 px;
    background - color: lightgreen;
    margin: 30 px;
}

HTML：

<div class="container">
    <div class="row">
        <div class="col">
            <div class="container text-center">
                <div id="box_1" class="random">Box 1</div>
                <div id="box_2" class="random">Box 2</div>
                <div id="box_3" class="random">Box 3</div>
                <div id="box_4" class="random">Box 4</div>
                <div id="box_5" class="random">Box 5</div>
                <div id="box_6" class="random">Box 6</div>
                <div id="box_7" class="random">Box 7</div>
                <div id="box_8" class="random">Box 8</div>
                <div id="box_9" class="random">Box 9</div>
                <div id="box_10" class="random">Box 10</div>
            </div>
        </div>
        <div class="col">
            <button onclick="NumberFunction(Math.floor(Math.random() * 10) + 1)" class="mt-5 btn btn-outline-danger">Reveal a random box</button>
        </div>
    </div>
</div>

JavaScript：

$(document).ready(function() {
    $(".task_hidden").hide();
    var box_1 = $('#box_1');
    var box_2 = $('#box_2');
    var box_3 = $('#box_3');
    var box_4 = $('#box_4');
    var box_5 = $('#box_5');
    var box_6 = $('#box_6');
    var box_7 = $('#box_7');
    var box_8 = $('#box_8');
    var box_9 = $('#box_9');
    var box_10 = $('#box_10');
});

function NumberFunction(random) {
    console.log(random);
    if (random = 1) { box_1.hide(); }
    if (random = 2) { box_2.hide(); }
    if (random = 3) { box_3.hide(); }
    if (random = 4) { box_4.hide(); }
    if (random = 5) { box_5.hide(); }
}

Answer 1

您的代码无法正常工作，因为您已在ready函数中声明了变量box_1，box_2，这些变量无法在NumberFunction函数中使用。此外，您在if而不是比较中分配变量。 =是作业，==或===用于比较。

您可以将代码改进为以下内容：

$(document).ready(function() {
  $(".task_hidden").hide();
});

function NumberFunction(random) {
  $("#box_" + random).hide();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col">

      <div class="container text-center">

        <div id="box_1" class="random">Box 1</div>
        <div id="box_2" class="random">Box 2</div>
        <div id="box_3" class="random">Box 3</div>
        <div id="box_4" class="random">Box 4</div>
        <div id="box_5" class="random">Box 5</div>
        <div id="box_6" class="random">Box 6</div>
        <div id="box_7" class="random">Box 7</div>
        <div id="box_8" class="random">Box 8</div>
        <div id="box_9" class="random">Box 9</div>
        <div id="box_10" class="random">Box 10</div>

      </div>

    </div>
    <div class="col">

      <button onclick="NumberFunction(Math.floor(Math.random() * 10) + 1)" class="mt-5 btn btn-outline-danger">Reveal a random box</button>
    </div>
  </div>
</div>

Answer 2

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col">

      <div class="container text-center">

        <div id="box_1" class="random">Box 1</div>
        <div id="box_2" class="random">Box 2</div>
        <div id="box_3" class="random">Box 3</div>
        <div id="box_4" class="random">Box 4</div>
        <div id="box_5" class="random">Box 5</div>
        <div id="box_6" class="random">Box 6</div>
        <div id="box_7" class="random">Box 7</div>
        <div id="box_8" class="random">Box 8</div>
        <div id="box_9" class="random">Box 9</div>
        <div id="box_10" class="random">Box 10</div>

      </div>

    </div>
    <div class="col">

      <button onclick="NumberFunction(Math.floor(Math.random() * 10) + 1)" class="mt-5 btn btn-outline-danger">Reveal a random box</button>
    </div>
  </div>
</div>
<script>
  function NumberFunction(random) {
    $("#box_" + random).hide();
  }
</script>

cook

Answer 3

与其他答案不同，每次点击都会删除一个框（这肯定会发生）但在其他答案中可能只需点击几下即可删除一个框。

$(document).ready(function(){

    var listOfRemovedNumbers =[];
    var lengthBoxs = $('[id^=box_]').length;

    function getRandomNumber(){
      do {
        var randomNumber = Math.floor(Math.random() * 10) + 1;
      } while(listOfRemovedNumbers.includes(randomNumber) );
      return randomNumber;
    }

    $('.btn').click(function(){
        var randomNumber = getRandomNumber();
        $('#box_'+randomNumber).remove();
        listOfRemovedNumbers.push(randomNumber);
        if ((listOfRemovedNumbers.length == lengthBoxs ))
          $('.btn').attr("disabled", "disabled").html('All Removed');
    })

})

$(document).ready(function(){
	
  var listOfRemovedNumbers =[];
  var lengthBoxs = $('[id^=box_]').length;

  function getRandomNumber(){
    do {
      var randomNumber = Math.floor(Math.random() * 10) + 1;
      } while(listOfRemovedNumbers.includes(randomNumber) );
      return randomNumber;
    }

   $('.btn').click(function(){
      var randomNumber = getRandomNumber();
      $('#box_'+randomNumber).remove();
        listOfRemovedNumbers.push(randomNumber);
        if ((listOfRemovedNumbers.length == lengthBoxs ))
    	  $('.btn').attr("disabled", "disabled").html('All Boxs are Removed');
    })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col">
      <div class="container text-center">
        <div id="box_1" class="random">Box 1</div>
	    <div id="box_2" class="random">Box 2</div>
	    <div id="box_3" class="random">Box 3</div>
	    <div id="box_4" class="random">Box 4</div>
	    <div id="box_5" class="random">Box 5</div>
	    <div id="box_6" class="random">Box 6</div>
	    <div id="box_7" class="random">Box 7</div>
	    <div id="box_8" class="random">Box 8</div>
	    <div id="box_9" class="random">Box 9</div>
	    <div id="box_10" class="random">Box 10</div>
	  </div>
	</div>
	<div class="col">
	  <button class="mt-5 btn btn-outline-danger">Reveal a random box</button>
    </div>
  </div>
</div>

我如何定位一个框以便用jQuery隐藏它？

3 个答案: