Javascript 使用JQuery仅显示一个元素

当点击链接时，我一次只需要显示一个元素。现在我再次隐藏所有内容，然后切换单击的元素，这就是作弊。这是可行的，除非我想让一切再次消失。除了添加“全部隐藏”按钮/链接，我能做什么？我想能够再次点击链接，并隐藏它的内容

EDIT:Pseudo的代码本来可以工作，但是这里的html错误地让您相信所有链接都在一个div中。与其跟踪它们的位置，不如通过它们的ID来调用它们

以下是我目前掌握的情况：

$(document).ready(function(){
    //hides everything
    $("#infocontent *").hide();

    //now we show them by which they click on
    $("#linkjoedhit").click(function(event){
      $("#infocontent *").hide();
      $("#infojoedhit").toggle();
      return false;
    });

    $("#linkgarykhit").click(function(event){
      $("#infocontent *").hide();
      $("#infogarykhit").toggle();
      return false;
    });

});

html看起来像：

<div id="theircrappycode">
    <a id="linkjoedhit" href="">Joe D</a><br/>
    <a id="linkgarykhit" href="">Gary K</a>
</div>

<div id="infocontent">
    <p id="infojoedhit">Information about Joe D Hitting.</p>
    <p id="infogarykhit">Information about Gary K Hitting.</p>
</div

有关Joe D击球的信息
有关Gary K Hiting的信息


我们也可以把这一点提高一点：

function toggleInfoContent(id){
   if($('#' + id).css('display') != 'none'){
      $('#' + id).hide();
   }else{
      $("#infocontent *").hide();
      $('#' + id).show();
   }
}

$("#linkgarykhit").click(function(){
    toggleInfoContent('infogarykhit');
    return false;
});

$("#linkbobkhit").click(function(){
    toggleInfoContent('infobobkhit');
    return false;
});

我刚开始使用
jQuery
，所以我不知道这是否愚蠢

function DoToggleMagic(strParagraphID) {
  strDisplayed = $(strParagraphID).css("display");
  $("#infocontent *").hide();
  if (strDisplayed == "none") 
    $(strParagraphID).toggle();
}
$(document).ready(function(){
  //hides everything
  $("#infocontent *").hide();

  //now we show them by which they click on
  $("#linkjoedhit").click(function(event){
    DoToggleMagic("#infojoedhit");
    return false;
  });

  $("#linkgarykhit").click(function(event){
    DoToggleMagic("#infogarykhit");
    return false;
  });        
});

如果您的标记“命名方案”是准确的，那么可以通过使用正则表达式作为选择器避免大量重复的代码，并明智地使用jQuery的“not”

您可以将一次单击事件附加到jQuery集合，该集合应该可以执行您想要的操作，因此在添加更多Jim或John的集合时不需要添加任何JavaScript，如下所示：

$(document).ready( function () {
  $("#infocontent *").hide();

  $("div#theircrappycode > a").click(function(event){
    var toggleId = "#" + this.id.replace(/^link/,"info");
    $("#infocontent *").not(toggleId).hide();
    $(toggleId).toggle();
    return false;
  });
});

这是一个稍微不同的方法，与伪受虐狂的代码有一些相似之处

$(document).ready(function(){
  $("#infocontent *").hide();
  $("#theircrappycode > a").click(statlink.togvis);
});
var statlink = {
  visId: "",
  togvis: function(){
    $("#" + statlink.visId).toggle();
    statlink.visId = $(this).attr("id").replace(/link/, "info");
    $("#" + statlink.visId).toggle();
  }
};

希望您也会觉得这很有用。
这不总是显示出来吗，因为单击中的“this”指的是链接，而不是段落？
$(document).ready(function(){
  $("#infocontent *").hide();
  $("#theircrappycode > a").click(statlink.togvis);
});
var statlink = {
  visId: "",
  togvis: function(){
    $("#" + statlink.visId).toggle();
    statlink.visId = $(this).attr("id").replace(/link/, "info");
    $("#" + statlink.visId).toggle();
  }
};