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

Question

I have a website that is using js to switch between two different navigation menus. It has always worked up until a week ago or so and I can't figure out why. Wondering if anyone here can point something out to me that I'm not seeing.

Here's my markup:

<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> 

And Here's my js:

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

When I look at my console using firebug, I get the following error:

ReferenceError: showonlyone is not defined

but with my lack of knowledge about js, I'm not entirely sure how to fix this.

Can anyone shed some light?

Answer 1

If you're going to invoke the showonlyone function using href="javascript:showonlyone()" you'll have to define it in the global scope, currently it's defined inside your document.ready() function.

You can also expose it explicitly using the window keyword:

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

Answer 2

Building on haim770's answer

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

$(document).ready(function() {});

Answer 3

Try this:

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

Answer 4

You're using jQuery, so move your inline JavaScript out of your HTML and use a data attribute to store thechosenone variable. Then you can use jQuery to add click methods to your anchors, grab the variable from the data attribute and run the rest of the code.

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

While your format is close to working and haim770 has already shown the problem, I would change your format a bit, here. Try this:

<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

Thanks 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