How to declare function within jQuery?

Question

I have the following where if you click on one of the list items, a JavaScript function will be called. This should run the jQuery below to hide/show an element.

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:

I tried this and but it didn't work:

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

The functionality must be working, it's just that the function must not be called when clicking on the list items.

http://stackoverflow.com/questions/1470488/what-is-the-purpose-of-the-var-keyword-and-when-to-use-it-or-omit-it — Quentin, May 11 '17 at 19:04

score 2 · Accepted Answer · answered May 11 '17 at 19:24

I think the problem is that the function is out of scope, it should work if you move the function outside of $(document).ready like this.

  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>

No problem, glad to help =) – Nicholas J. Markkula May 11 '17 at 19:55 — Nicholas J. Markkula, May 11 '17 at 19:55

score 0 · Answer 2 · answered May 11 '17 at 19:04

Like This ????

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>

div_newboxes is outside of that scope by one level. – konyv12 May 11 '17 at 19:09 — konyv12, May 11 '17 at 19:09
hmm wait... you want this in One Level – RïshïKêsh Kümar May 11 '17 at 19:13 — RïshïKêsh Kümar, May 11 '17 at 19:13

How to declare function within jQuery?

2 Answers2