Wie deklariert man die Funktion innerhalb von jQuery?

Question

Ich habe folgendes: Wenn Sie auf eines der Listenelemente klicken, wird eine JavaScript-Funktion aufgerufen. Dies sollte die unten angegebene jQuery ausführen, um ein Element ein-/auszublenden.

div#user-box 
    ul 
    li#dashboard(href="javascript:showonlyone('newboxes1')") 
     a Dashboard 
    li#settings(href="javascript:showonlyone('newboxes2')") 
     a Settings 
    div(class='newboxes' id='newboxes1') 
    p Dashboard 
    div(class='newboxes' id='newboxes2') 
    p Account ID: 

habe ich versucht, diese und aber es hat nicht funktioniert:

$(document).ready(function() { 
var showonlyone = function(thechosenone) { 
$('.newboxes').each(function(index) { 
if ($(this).attr("id") == thechosenone) { 
    $(this).show(200)} 
    else { 
    $(this).hide(600); 
    } 
}) 
} 
}) 

Die Funktionalität arbeiten müssen, es ist nur, dass die Funktion nicht, wenn Sie auf die Listeneinträge aufgerufen werden muss.

Answer 1

ich glaube, das Problem ist, dass die Funktion außerhalb des Bereichs ist, sollte es funktionieren, wenn Sie die Funktion außerhalb von $(document).ready wie diese bewegen.

function showonlyone(thechosenone) { 
 
    $('.newboxes').each(function(index) { 
 
     if ($(this).attr("id") == thechosenone) { 
 
     $(this).show(200)} 
 
    else { 
 
     $(this).hide(600); 
 
    } 
 
    }) 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="user-box"> 
 
    <ul> 
 
    <li id="dashboard"> 
 
     <a href="#" onclick="showonlyone('newboxes1')">Dashboard</a> 
 
    </li> 
 
    <li id="settings"> 
 
     <a href="#" onclick="showonlyone('newboxes2')">Settings</a> 
 
    </li> 
 
    </ul> 
 
</div> 
 

 
<div class="newboxes" id="newboxes1" hidden="hidden"> 
 
    dashboard 
 
</div> 
 
<div class="newboxes" id="newboxes2" hidden="hidden"> 
 
    settings 
 
</div>

Answer 2

Gefällt mir dies ????

jQuery(document).ready(function(){ 
 
    $('.newboxes').on('click', function(){ 
 
    $('.div_newboxes').hide(600); 
 
     var div_id = "#div_" + $(this).prop('id'); 
 
     $(div_id).show(200); 
 
    }) 
 
}(jQuery))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
     <td> 
 
     <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;"> 
 
      <a class="newboxes" href="#" id="newboxes1">show this one only</a> 
 
     </div> 
 
     <div class ="div_newboxes" id="div_newboxes1" style="border: 1px solid black; background-color: #CCCCCC; display: block;padding: 5px; width: 150px;">Div #1</div> 
 
     </td> 
 
     <td> 
 
     <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;"> 
 
      <a class="newboxes" href="#" id="newboxes2" >show this one only</a> 
 
     </div> 
 
     <div class ="div_newboxes" id="div_newboxes2" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px; width: 150px;">Div #2</div> 
 
     </td> 
 
     <td> 
 
     <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;"> 
 
      <a class="newboxes" href="#" id="newboxes3" >show this one only</a> 
 
     </div> 
 
     <div class ="div_newboxes" id="div_newboxes3" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px; width: 150px;">Div #3</div> 
 
     </td> 
 
    </tr>