Question

我的程序有2个带按钮的div，一个被隐藏，另一个被显示。当我单击显示的div按钮时，它将切换这2个div，先隐藏然后再显示。但是，即使代码完全相同，第二个按钮也不像第一个div中的按钮那样与同级div上的元素交互。（html）

java

（jquery）

<div class="first_two_guesses">
  <input type="text" class="guess" id='first_guess' placeholder="first guess">
  <input type="text" class="guess" id='second_guess' placeholder="second guess">      
  <button type='button' class="btn-add">Submit</button>
</div>
<div class='word_guesses' style='display: none;'>
  <input type='text' class='guess' id='word_or_letter' placeholder='letter or word'>
  <button type='button' class='btn-guess'>Submit</button>
</div>

Answer 1

您忘记在代码中加上结尾括号（)）。见下文：

$('.btn-add').on('click', function(){   
  $('.first_two_guesses').hide();
  $('.word_guesses').show();
});

$('.btn-guess').on('click', function(){   
  $('.first_two_guesses').show();
  $('.word_guesses').hide();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="first_two_guesses">
  <input type="text" class="guess" id='first_guess' placeholder="first guess">
  <input type="text" class="guess" id='second_guess' placeholder="second guess">      
  <button type='button' class="btn-add">Submit</button>
</div>
<div class='word_guesses' style='display: none;'>
  <input type='text' class='guess' id='word_or_letter' placeholder='letter or word'>
  <button type='button' class='btn-guess'>Submit</button>
</div>

Answer 2

使用jQuery .toggle()函数来切换html元素的可见性。

$('.btn-add').on('click', function(){   
  $('.first_two_guesses').toggle();
  $('.word_guesses').toggle();
});

$('.btn-guess').on('click', function(){   
  $('.first_two_guesses').toggle();
  $('.word_guesses').toggle();
});

Answer 3

您现在可以使用.on()方法。通过将委托事件附加到运行jQuery时HTML中可见的元素上。

因此，如果在运行jQuery时a.someClass被隐藏，则应将委托事件附加到主体上，以便将来在有可见a.someClass元素时运行，例如：

$('body').on('click','input.a.someClass',function(){
  alert("test");
});

Answer 4

请参见Demo。

$('.btn-add').on('click', function(){   
   //... do someting ...
  $('.first_two_guesses').hide();
  $('.word_guesses').show();
});

$('.btn-guess').on('click', function(){   
 // ... do the same thing ...
   $('.first_two_guesses').show();
  $('.word_guesses').hide();
});

我已经编辑了您的问题，我理解您的问题就像您要在两次单击按钮之间切换一样。尝试对元素使用ID选择器。 ID可用于标识一个元素，而类可用于标识多个元素

先前隐藏的div上的按钮不起作用

4 个答案: