如何隐藏除了jQuery之外的所有div？ （未定义的函数错误）

Question

我想在点击相应的链接时隐藏所有div除外。我发现一些代码似乎满足了我的需求，但我在控制台中不断得到一个未定义的函数错误。 （未捕获的ReferenceError：未定义showonlyone）

<aside>
  <div><a id="myHeader1" href="javascript:showonlyone('newboxes1');">Blog</a></div>
  <div><a id="myHeader2" href="javascript:showonlyone('newboxes2');">Shop</a></div>
  <div><a id="myHeader3" href="javascript:showonlyone('newboxes3');">Press/Media</a></div>
</aside>

<section class="main">
  <div class="newboxes" id="newboxes1" >
    <h2>Here's the Blog!</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus incidunt, eum ex tempore, inventore quibusdam. Suscipit asperiores aperiam provident sunt cupiditate non.</p>
  </div>
  <div class="newboxes" id="newboxes2" >
    <h2>This Section is Where to Shop for Water</h2>
    <ul>
        <li>Shop Here</li>
    </ul>
  </div>
  <div class="newboxes" id="newboxes3" >
    <h2>Here's all the press and Media Stuff</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus tempora nihil sed at eius ratione molestias cum eaque necessitatibus voluptatibus nisi illum sequi eos voluptates sit possi</p>
    </div>
</section>

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

Answer 1

此代码可以使用：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<aside>
  <div><a id="myHeader1" href="javascript:showonlyone('newboxes1');">Blog</a></div>
  <div><a id="myHeader2" href="javascript:showonlyone('newboxes2');">Shop</a></div>
  <div><a id="myHeader3" href="javascript:showonlyone('newboxes3');">Press/Media</a></div>
</aside>

<section class="main">
  <div class="newboxes" id="newboxes1" >
    <h2>Here's the Blog!</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus incidunt, eum ex tempore, inventore quibusdam. Suscipit asperiores aperiam provident sunt cupiditate non.</p>
  </div>
  <div class="newboxes" id="newboxes2" >
    <h2>This Section is Where to Shop for Water</h2>
    <ul>
        <li>Shop Here</li>
    </ul>
  </div>
  <div class="newboxes" id="newboxes3" >
    <h2>Here's all the press and Media Stuff</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus tempora nihil sed at eius ratione molestias cum eaque necessitatibus voluptatibus nisi illum sequi eos voluptates sit possi</p>
    </div>
</section>

<script>
  $ = jQuery;
  function showonlyone(thechosenone) {
     $('.newboxes').each(function(index) {
          if ($(this).attr("id") == thechosenone) {
               $(this).show(200);
          }
          else {
               $(this).hide(600);
          }
     });
  }
</script>

请注意，我正在关联Google托管的jquery.min.js。此外，正如用户在他的评论中指出的那样，你的showonlyone在准备好的呼叫范围内。这是您看到的错误消息的根本原因。

Answer 2

这是一种简单且非常灵活的方式，jsfiddle link

<aside>
    <div><a id="myHeader1" class="link" data-link="newboxes1" href="javascript:void();">Blog</a>
    </div>
    <div><a id="myHeader2" class="link" data-link="newboxes2" href="javascript:void();">Shop</a>
    </div>
    <div><a id="myHeader3" class="link" data-link="newboxes3" href="javascript:void();">Press/Media</a>
    </div>
</aside>
<section class="main">
    <div class="newboxes" id="newboxes1">
         <h2>Here's the Blog!</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus incidunt, eum ex tempore, inventore quibusdam. Suscipit asperiores aperiam provident sunt cupiditate non.</p>
    </div>
    <div class="newboxes" id="newboxes2">
         <h2>This Section is Where to Shop for Water</h2>
        <ul>
            <li>Shop Here</li>
        </ul>
    </div>
    <div class="newboxes" id="newboxes3">
         <h2>Here's all the press and Media Stuff</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus tempora nihil sed at eius ratione molestias cum eaque necessitatibus voluptatibus nisi illum sequi eos voluptates sit possi</p>
    </div>
</section>

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

Answer 3

有一种更好的方式来设置您的链接，而不是依靠href="javascript..."来调用您的功能...... JSFiddle

您需要包含这样的jQuery文件：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

新Javascript（和jQuery）：

function showonlyone(thechosenone) {
    $('.newboxes').each(function(index) {
        if ($(this).attr("id") == thechosenone) {
            $(this).show(200);
        } else {
            $(this).hide(600);
        }
    });
}
$(function(){
    /*set up all your links to run the showonlyone() function*/
    $('#myHeader1').click(function(){
        showonlyone('newboxes1'); 
    });
    $('#myHeader2').click(function(){
        showonlyone('newboxes2'); 
    });
    $('#myHeader3').click(function(){
        showonlyone('newboxes3'); 
    });
});

调整后的HTML：

<aside>
    <!--the links in your nav no longer need the href attribute to call the javascript so the void(0) just allows the anchor tag to still behave like a link -->
    <div><a id="myHeader1" href="javascript:void(0);">Blog</a></div>
    <div><a id="myHeader2"  href="javascript:void(0);">Shop</a></div>
    <div><a id="myHeader3"  href="javascript:void(0);">Press/Media</a></div>
</aside>
<section class="main">
    <div class="newboxes" id="newboxes1">
         <h2>Here's the Blog!</h2>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus incidunt, eum ex tempore, inventore quibusdam. Suscipit asperiores aperiam provident sunt cupiditate non.</p>
    </div>
    <div class="newboxes" id="newboxes2">
         <h2>This Section is Where to Shop for Water</h2>

        <ul>
            <li>Shop Here</li>
        </ul>
    </div>
    <div class="newboxes" id="newboxes3">
         <h2>Here's all the press and Media Stuff</h2>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus tempora nihil sed at eius ratione molestias cum eaque necessitatibus voluptatibus nisi illum sequi eos voluptates sit possi</p>
    </div>
</section>