Отображение и скрытие элементов в jQuery


У меня есть следующий скрипт, чтобы выявить разделы на странице, если определенный текст в кнопки. Как свернуть все другие разделы, если один из них выбран и сделать его масштабируемым для 20 элементов?

Следующее решение выглядит, как она нуждается в рефакторинге, а также при нажатии icn_1, например, все остальные разделы уже могут быть скрыты и если для всех секций за каждый клик функция кажется очень излишним.

$(document).ready(function() {
  $('section#1').hide();
  $('section#2').hide();
  $('section#3').hide();
  $('section#4').hide();    

  function reveal1() {
  $("section#1").show("slow");
  $("section#2").hide("fast");
  $("section#3").hide("fast");
  $("section#4").hide("fast");
  }
  $(".icn_1").click(reveal1);

  function reveal2() {
  $("section#2").show("slow");
  $("section#1").hide("fast");
  $("section#3").hide("fast");
  $("section#4").hide("fast");
  }
  $(".icn_2").click(reveal2);

  function reveal3() {
  $("section#3").show("slow");
  $("section#1").hide("fast");
  $("section#2").hide("fast");
  $("section#4").hide("fast");
  }
  $(".icn_3").click(reveal3);

  function reveal4() { 
  $("section#4").show("slow");
  $("section#1").hide("fast");
  $("section#2").hide("fast");
  $("section#3").hide("fast");
  }
  $(".icn_4").click(reveal4);
});


21441
2
задан 12 декабря 2011 в 06:12 Источник Поделиться
Комментарии
5 ответов

Чтобы сделать его масштабируемым для 20 или больше деталей, выполните следующие действия:


  1. Дайте все ваши кликабельные вещи того же класса и уникальный идентификационный код типа:

  2. Дать каждой секции юридического идентификатор, который начинается с персонажа, а не количество, но имеет тот же номер, как идентификатор активного элемента совпадает с и общее название класса как:
    . Имейте в виду, что правовой помощью CSS кодов (до того, как HTML5) не должны начинаться с номера или символа.

  3. Затем, вы можете использовать этот кусок кода, чтобы управлять ими всеми:

Код:

$(".icn").click(function() {
var num = this.id.match(/\d+/)[0];
$(".sections").hide();
$("#section_" + num).show();
});

Подведем итог.


  1. Кнопки есть ID как `icn_1'.

  2. При нажатии на кнопку, код извлекает число из идентификатор нажатой кнопки

  3. Тогда все разделы будут скрыты с помощью .разделы имя класса.

  4. Затем число мы получили в сочетании с текстом в виде идентификатора типа `#section_1" и что показали разделе.

  5. Результат будет один и только один раздел виден (тот, который имеет тот же номер, в его код, как элемент, который был нажат).

  6. Это масштабируется до тысяч элементов.

6
ответ дан 12 декабря 2011 в 06:12 Источник Поделиться

Во-первых, у вас есть несколько функций с одинаковым именем. Это не действует.

Предполагая, что эти разделы ДИВС, чтобы скрыть их все, кроме одного, взгляните на не функцию:

function reveal1() { 
$("div").not("#section1").hide("slow");
$("#section1").show();
}

Или более обобщенно:

function revealThisElement(elementId) { 
$("div").not("#" + elementId).hide("slow");
$("#" + elementId).show();
}

$(".icn_1").click(function() { revealThisElement("section1"); });
$(".icn_2").click(function() { revealThisElement("section2"); });
$(".icn_3").click(function() { revealThisElement("section3"); });

Или еще лучше, почему бы не попробовать что-то вроде этого:

$(".revealable").click(function() { 
revealMe(this);
});

function revealMe(element) {
$("div.revealable").not("#" + element.id).hide("slow");
$(element).show();
}

6
ответ дан 12 декабря 2011 в 06:12 Источник Поделиться

Вот пример:

<html>
<body>
<button class="b" id="b1">B1</button>
<button class="b" id="b2">B2</button>
<button class="b" id="b3">B3</button>
<hr/>
<section id="section1" class="hideme">
section1
</section>
<section id="section2" class="hideme">
section2
</section>
<section id="section3" class="hideme">
section3
</section>
</body>
</html>

$(document).ready(function() {
// hide all sections on load
$("section.hideme").hide();

// add click listener on buttons
$("button.b").click(function() {
var id = $(this).attr("id"); // button id
var sectionId = id.replace("b", "section"); // = sectionN
$("section.hideme").hide(); // hide all sections
$("section#" + sectionId).fadeIn("slow"); // fadeIn() wanted section
});
});

http://jsfiddle.net/Regisc/bVfcz/

2
ответ дан 12 декабря 2011 в 06:12 Источник Поделиться

Нужно думать более обобщенно. Давайте держать это простым. Ваш HTML должен быть буквально дублируются например, так:

<style type="text/css">
section { display:none; }
</style>

<div class="section-header">section 1 header</div>
<section>
section 1 content
</section>
<div class="section-header">section 2 header</div>
<section>
section 2 content
</section>
<div class="section-header">section 3 header</div>
<section>
section 3 content
</section>

<script type="text/javascript">
$('.section-header').click(function(){
var $mysection = $(this).next();
$('section').not($mysection).slideUp('fast');
$mysection.slideDown('fast');
});
</script>

1
ответ дан 12 декабря 2011 в 06:12 Источник Поделиться

Я хотел бы предложить, используя атрибут class для каждого значка, то есть одна функция, которая скрывает все разделы, затем показывает один соответствующий раздел.

Добавить атрибут class="мск", чтобы все значки и класс="" Раздел для всех разделов.
Измените идентификатор каждый значок, чтобы просто быть число (1, 2, 3 и т. д.)
Затем используйте следующий код

$(".icn").click(reveal); // add event listener to all icons
function reveal(event){
$(".section").hide();
$("#section"+event.currentTarget.id).show();
}

1
ответ дан 12 декабря 2011 в 06:12 Источник Поделиться