Показать только один элемент с JQuery

Question

Мне нужно показывать только один элемент за раз, когда на ссылку нажимают. Прямо сейчас я обманываю, скрывая все снова и затем нажимая на элемент. Это работает, если я не хочу, чтобы ВСЕ снова исчезло. Если не добавить кнопку «Скрыть все» / ссылку, что я могу сделать? Я хотел бы иметь возможность снова щелкнуть ссылку и скрыть ее содержимое.

РЕДАКТИРОВАТЬ: псевдо-код работал бы, но HTML здесь по ошибке заставил вас поверить, что все ссылки были в одном div. вместо того, чтобы отследить, где они все были, проще назвать их по их идентификатору.

Вот что у меня есть:

$(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, я не имею никакого контроля над фактическим макетом, который ужасен. Достаточно сказать, что это единственный способ организовать ссылки / информацию.

Answer 1

Если ваша разметка «схема именования» точна, вы можете избежать большого количества повторяющегося кода, используя RegEx для вашего селектора и разумно используя jQuery «not».

Вы можете прикрепить событие click один раз к коллекции 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;
  });
});

Answer 2

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

Answer 3

Здесь немного другой подход, есть некоторые сходства с кодом псевдомазохиста.

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

Надеюсь, вы тоже найдете это полезным.

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