Mein Jquery arbeitet nicht mit der Anzeige der divs in der Seite

Question

Mein Jquery-Code scheint korrekt geschrieben zu sein, aber es funktioniert immer noch nicht.

$('#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

Sein, weil Seite 2 ein Kind der Seite ist 1. Sie müssen den richtigen HTML definieren solche unerwarteten Fehler zu vermeiden.

Außerdem gibt es kein Element mit der ID nextBtn2 in Ihrem HTML.

$('#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

Sie haben einige div Schluss Probleme mit jobSetupPage1 Sie es schließen müssen, bevor der jobSetupPage2 und Sie haben die falsche Auswahl für Ihren zweiten Klick Fall sollte #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>

sein

Answer 3

Ich habe die Lösung gefunden!

Ich habe die jQuery-Funktion innen: -

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

und es funktioniert jetzt.