使用 JQuery 仅显示一个元素

Show Only One Element with JQuery

本文关键字：一个 元素 JQuery 显示 使用      更新时间：2023-09-26

单击链接时，我一次只需要显示一个元素。现在我通过再次隐藏所有内容然后切换单击的元素来作弊。这有效，除非我希望一切都再次消失。除了添加"全部隐藏"按钮/链接之外，我该怎么办？我希望能够再次单击链接，并隐藏其内容。

编辑：伪的代码本来可以工作，但这里的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

大约有 20 个这样的链接。因为我没有编写实际的html，所以我无法控制实际的布局，这太可怕了。可以说，这是组织链接/信息的唯一方法。

$("#linkgarykhit").click(function(){
   if($("#infogarykhit").css('display') != 'none'){
      $("#infogarykhit").hide();
   }else{
      $("#infocontent *").hide();
      $("#infogarykhit").show();
   }
   return false;
});

我们也可以稍微干一下：

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的"not"来避免大量重复的代码。

您可以将点击事件附加到 jQuery 集合一次，该集合应该执行您想要的操作，这样您就不需要在添加更多 Jim 或 John 的 JavaScript 时添加任何 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();
  }
};

希望你也觉得这有用。

我刚从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;
  });        
});
相关文章：