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

如果您要使用showonlyone调用href="javascript:showonlyone()"函数，则必须在全局范围内定义它，目前它已在{{1}内定义1}}功能。

您还可以使用document.ready()关键字明确公开它：

window

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

谢谢安德鲁！

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

Javascript链接停止工作，无法弄清楚原因

6 个答案: