Jquery - отображение и скрытие несколько дивы

Question

Im пытаясь узнать некоторые JavaScript/JQuery, но им не делать очень большой прогресс ..

У меня есть несколько дивы, как это:

<div class="article1" style="display:none;">content</div> 
<div class="article2" style="display:none;">content</div> 
<div class="article3" style="display:none;">content</div> 

Под каждым классом я есть текстовая ссылка, после щелчка на ней я хочу, чтобы она показывала конкретный div.

Как это:

<a href="javascript:toggle(1);" class="showarticle">View Article</a> 

Так я думал, что я бы сделал функцию, я могу дать идентификатор, и показывает DIV на щелчок, это то, что я пробовал:

<script> 

      function toggle(id) { 
      $(".showarticle").click(function()){ 
       $(".article" + id).show(); 
       }  
      } 

</script> 

Однако ничего не происходит, но я не вижу ничего плохого.

может кто-нибудь сказать мне, что я не делаю прямо здесь?

Благодаря

редактировать: я включил библиотеку JQuery;)

Answer 1

Это не то, как вы используете обработчик событий.

Обработчики событий загружаются один раз, а затем спокойно сидят в фоновом режиме, ожидая чего-то, что может вызвать их. В вашем случае вы хотите загрузить обработчик click (после загрузки DOM), который ждет щелчка по ссылке.

Нечто подобное. HTML:

<a href="#" id="1" class="showarticle">View Article</a> 

JS:

$(document).ready(function() {   // wait for DOM to load 
    $(".showarticle").click(function(e) { // click handler for all .showarticles 
     e.preventDefault();    // cancel normal click behavior 
     $(".article" + this.id).show(); // if id="1", shows '.article1' 
    }); 
}); 

---

Это версия 'минимальные изменения'. Лучшей практикой было бы использовать атрибуты data- вместо идентификаторов в ссылке и идентификаторы вместо классов в divs и таблицу стилей, чтобы скрыть их все в начале.

CSS:

.togglediv { 
    display:none; 
} 

HTML:

<div id="article1" class="togglediv">content</div> 
<a href="#" data-togglediv="article1" class="showarticle">View Article</a> 

JS:

$(document).ready(function() {   // wait for DOM to load 
    $(".showarticle").click(function(e) { // click handler for all .showarticles 
     e.preventDefault();    // cancel normal click behavior 
     $div = $('#'+$(this).data('togglediv')); // http://api.jquery.com/data 
     $div.show();      // or $div.toggle() to show and hide 
    }); 
}); 

http://jsfiddle.net/mblase75/sT6gw/

Answer 2

версия Javascript может быть что-то вроде, как показано ниже, необходимо присвоить уникальные идентификаторы для каждого DIV:

function toggle_visibility(id) { 
    var e = document.getElementById(id); 
    if(e.style.display == "inline") { 
     e.style.display = 'none'; 
    } 
    else if(e.style.display == "none") { 
     e.style.display = "inline"; 
    } 
} 

Answer 3

Everytime вы нажимаете один из тегов a, вы связываете событие click с .showarticle, но вы не выполняете действие, один из способов:

function toggle(id) { 
    $(".article" + id).show(); 
} 

Для этого вам следует использовать id вместо классов.

Answer 4

исправить разметку выглядеть следующим образом: (удалено число от сл попка, удалил разметку Java-функция)

<div class="article" style="display:none;">content</div> 
<a href="#" class="showarticle">View Article</a> 
<div class="article" style="display:none;">content</div> 
<a href="#" class="showarticle">View Article</a> 
<div class="article" style="display:none;">content</div> 
<a href="#" class="showarticle">View Article</a> 

Тогда просто сделать это: фиксированный синтаксис, удален при добавлении обработчика щелчка каждый клик, проще код.

$(".showarticle").click(function() { 
    $(this).prev(".article").show(); 
}); 

EDIT: Кроме того, теперь, это вы хотите скрыть предыдущий показано, показывая только самый последний щелкнул:

$(".showarticle").click(function() { 
    $('.article').hide(); 
    $(this).prev(".article").show(); 
}); 

EDIT: Еще один способ переключения: принимает на себя те только «статьи» и 'showarticle' на странице

$(".showarticle").click(function() { 
    $('.article').hide().eq($('.showarticle').index(this)).show(); 
});