Нажмите на p.class, скрыть div.class - Jquery

Question

Я создаю автоматически сгенерированную страницу из XML-структуры, она имеет такой стиль;

<p class=foo>ClickMe</p>
<div class=foo">
 ###somedata####
</div>

а затем еще один, как это, и т. Д. И т. Д.

Идея в том, что тогда я могу нажать на параграфа и показать / скрыть содержимое div. (это умный или вы можете сделать это другим, более динамичным способом?)

$("p").click(function()
    {
       $("div").toggle("fast");
    });

Теперь все элементы "div" будут скрыты, "div.nameonlcass" будет делать то, что я хочу, я искал, но не смог найти, как получить имя класса.

Я новичок в jquery, и я думаю, что это довольно легко исправить.

Заранее спасибо.

Answer 1

Попробуйте это

$("p").click(function() {
    $(this).next().toggle("fast");
});

Answer 2

Вам нужно .next() метод JQuery

$("p").click(function(){
     $(this).next("div").toggle("fast");
});

Answer 3

Да, ваш код верен, но использование тега непосредственно внутри селектора применяет вашу логику ко всем доступным <p> и <div> в вашем HTML

, поэтому вы можете написать его в форме ниже

$(document).ready(function() {
    $("p.foo").click(function(){
       $(this).next("div.foo").toggle("fast");
    })
})

Answer 4

Прежде всего, если вы решите добавить класс в ваш HTML, сделайте это так

<p class="foo">ClickMe</p>
<div class="foo"">
 ###somedata####
</div>

Во-вторых, ваш код jQuery скрывает ВСЕ элементы div, потому что вы выбираете все элементы div! Потому что $('div') выбирает все элементы div на странице HTML

Вы можете либо скрыть все элементы div, имеющие класс "foo", который будет:

$('p').on("click",function(){
    $('div.foo').hide();// hides all the div's that have the class foo
});

Но я бы предпочел сделать это гораздо более динамично:

$('p').on("click",function(){
   var classOfP=$(this).attr("class");
   var divSelector = "div."+classOfP;
   $(divSelector).hide();
});

Итак, что это делает, он берет класс элемента p, на который вы нажали, и скрывает все div, которые имеют один и тот же класс. С этим вы можете структурировать свой код намного больше.

И еще одна вещь, которую я бы предложил - использовать .on("click",...), потому что событие будет срабатывать каждый раз, а также, если оно будет добавлено в купол после создания. И .on() - это новый «стандарт» для обработки событий, начиная с jQuery 1.7

Answer 5

Может быть, это то, что вы ищете?

$('p.foo').click(function() {
   $(this).next('div.foo').toggle("fast");
});