我的Jquery无法在页面中显示div

Question

我的Jquery代码看起来写得正确，但它仍然无法正常工作。

$('#nextBtn1').click(function() {
  $('#jobSetupPage1').hide();
  $('#jobSetupPage2').show();
});

$('#nextBtn2').click(function() {
  $('#jobSetupPage2').hide();
  $('#jobSetupPage1').show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="jobSetup1" id="jobSetupPage1">
  <div class="container" id="jobName">
    <div class="title" id="jobNameTitle">Job name:</div>
    <input type="text" name="jobNameValue" id="jobNameValue">
    <img src="icons/arrow_right_60x60_wh.png" class="icons nextBtn" id="nextBtn1">
  </div>

  <div class="jobSetup2" style="display: none;" id="jobSetupPage2">
    <img src="icons/arrow_left_60x60_wh.png" class="icons prevBtn" id="prevBtn2">
  </div>

Answer 1

因为第2页是第1页的子级。您需要定义HTML以避免此类意外错误。

另外，HTML中没有ID为nextBtn2的元素。

$('#nextBtn1').click(function() {
  $('#jobSetupPage1').hide();
  $('#jobSetupPage2').show();
});

$('#prevBtn2').click(function() {
  $('#jobSetupPage2').hide();
  $('#jobSetupPage1').show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="jobSetup1" id="jobSetupPage1">
  <div class="container" id="jobName">
    <div class="title" id="jobNameTitle">Job name:</div>
    <input type="text" name="jobNameValue" id="jobNameValue">
    <img src="icons/arrow_right_60x60_wh.png" class="icons nextBtn" id="nextBtn1"> page 1
  </div>
</div><!-- close div here -->

<div class="jobSetup2" style="display: none;" id="jobSetupPage2">
  <img src="icons/arrow_left_60x60_wh.png" class="icons prevBtn" id="prevBtn2"> page 2
</div>

Answer 2

jobSetupPage1你需要在jobSetupPage2之前关闭它并且你的第二次点击事件有错误的选择器，你应该是#prevBtn2

$('#nextBtn1').click(function() {
  $('#jobSetupPage1').hide();
  $('#jobSetupPage2').show();
});

$('#prevBtn2').click(function() {
  $('#jobSetupPage2').hide();
  $('#jobSetupPage1').show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="jobSetup1" id="jobSetupPage1">
  <div class="container" id="jobName">
    <div class="title" id="jobNameTitle">Job name:</div>
    <input type="text" name="jobNameValue" id="jobNameValue">
    <img src="icons/arrow_right_60x60_wh.png" class="icons nextBtn" id="nextBtn1">
  </div>
</div>
<div class="jobSetup2" style="display: none;" id="jobSetupPage2">
  page2
  <img src="icons/arrow_left_60x60_wh.png" class="icons prevBtn" id="prevBtn2">
</div>

Answer 3

我找到了解决方案！

我把jQuery函数放在里面： -

$('document').ready(function() {});

它现在正在运作。