如何在jQuery中声明函数？

Question

我有以下的地方，如果你点击其中一个列表项，JavaScript函数将被调用。这应该运行下面的jQuery来隐藏/显示一个元素。

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: 

我尝试这样做，但它没有工作：

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

的功能必须正常工作，它只是该功能不能在列表中的项目，当点击调用。

Answer 1

我认为这个问题是该函数是超出范围，如果移动功能的$(document).ready这样外面它应该工作。

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

喜欢这个？

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>