Javascript链接停止工作，无法弄清楚为什么

Question

我有一个网站，它使用js在两个不同的导航菜单之间切换。直到一周左右，它一直在起作用，我不明白为什么。想知道这里是否有人能向我指出一些我没有看到的东西。

这是我的标记：

<div class="catMenu">
    <a href="javascript:showonlyone('newboxes1');">Works</a>
</div>
<div class="newboxes" id="newboxes1" style="display:block;" >
    ...the 1st menu
</div>
<div class="catMenu2">
    <a href="javascript:showonlyone('newboxes2');" >About</a>
</div>
<div class="newboxes" id="newboxes2"  style="display:none;">
    ...the 2nd menu
</div> 

这是我的js:

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

当我使用firebug查看我的控制台时，我得到以下错误：

ReferenceError: showonlyone is not defined

但由于我对js缺乏了解，我不完全确定如何解决这个问题。

有人能透露一些信息吗？

Answer 1

如果要使用href="javascript:showonlyone()"调用showonlyone函数，则必须在全局范围内定义它，目前它是在document.ready()函数内定义的。

您也可以使用window关键字显式公开它：

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

Answer 2

基于haim770的答案

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

Answer 3

试试这个：

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

Answer 4

您使用的是jQuery，因此将内联JavaScript从HTML中移出，并使用data属性来存储thechosenone变量。然后，您可以使用jQuery向锚点添加click方法，从data属性中获取变量并运行其余代码。

HTML

<div class="catMenu">
  <a data-chosen="newboxes1">Works</a>
</div>

JS

$(document).ready(function() {
  $('a').click(function () {
    var thechosenone = $(this).data('chosen');
    $('.newboxes').each(function(index) {
      if ($(this).attr("id") == thechosenone) {
        $(this).show();
      } else {
        $(this).hide();
      }
    });        
  });
});

DEMO

Answer 5

虽然您的格式已经接近工作状态，并且haim770已经显示了问题，但我想在这里稍微更改一下您的格式。试试这个：

<div class="catMenu">
    <a id="LinkNewBoxes1" class="ToggleDisplay">Works</a>
</div>
<div class="newboxes" id="NewBoxes1" style="display:block;" >
    ...the 1st menu
</div>
<div class="catMenu2">
    <a id="LinkNewBoxes2" class="ToggleDisplay" >About</a>
</div>
<div class="newboxes" id="NewBoxes2"  style="display:none;">
    ...the 2nd menu
</div> 

$(document).ready(function() {
    $(".ToggleDisplay").click(function(e){ //Event Handler for ToggleDisplay clicks
        var BoxToDisplay = $(this).prop("id").replace("Link", ""); //Removes 'Link' from anchor tags ID and assigns to variable
        $(".newBoxes").each(function(){
            if ($(this).prop("id") == BoxToDisplay) //Check if this is the right one to display
                $(this).show();
            else
                $(this).hide();
        });
       e.preventDefault(); //Prevent browser's default action for anchor clicks
       return false;
    });
});

Answer 6

谢谢Andrew！

HTML

<div class="catMenu">
    <a href='#' id="LinkNewBoxes1" class="ToggleDisplay">Works</a>
</div>
<div class="newboxes" id="NewBoxes1" style="display:block;" >
    ...the 1st menu
</div>
<div class="catMenu2">
    <a href='#' id="LinkNewBoxes2" class="ToggleDisplay" >About</a>
</div>    
<div class="newboxes" id="NewBoxes2"  style="display:none;">
    ...the 2nd menu
</div>  

JS-

$(".ToggleDisplay").click(function(e){ 
    var BoxToDisplay = $(this).prop("id").replace("Link", ""); 
    $(".newboxes").each(function(){
        //Check if this is the right one to display
        if ($(this).prop("id") == BoxToDisplay) 
            $(this).show();
        else
            $(this).hide();
    });
   e.preventDefault(); 
   return false;
});

FIDDLE