使用 JQuery 仅显示一个元素

Posted 2023-05-08

【中文标题】使用 JQuery 仅显示一个元素

【英文标题】：Show Only One Element with JQuery

【发布时间】：2010-09-15 04:44:19

【问题描述】：

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

编辑：伪代码本来可以工作，但这里的 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 进行编码，所以我无法控制实际的布局，这太可怕了。可以说，这是组织链接/信息的唯一方法。

【参考方案1】：

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

---

我们也可以DRY这个有点：

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

【讨论】：

这不会一直显示，因为点击中的“this”指的是链接，而不是段落？

【参考方案2】：

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

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

$(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;
  );
);

【参考方案3】：

这是一个稍微不同的方法，与 Pseudo Masochist 的代码有一些相似之处。

$(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();
  
;

希望你也觉得这很有用。

【参考方案4】：

我刚开始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;
  );        
);