Блог

Главная - Вопросы по программированию - jQuery показывает / скрывает один div с тем же классом, что и другие

jQuery показывает / скрывает один div с тем же классом, что и другие

#jquery #html #css

#jquery #HTML #css

Вопрос:

В настоящее время я делаю комментарий и ставлю лайк системе, похожей на ту, что на facebook. Но я просто не могу понять, как выбрать конкретный div!

Мой текущий HTML выглядит так:

 <div class='activoptions'><a href='#'>Like</a>  <a href='#' class="addcomment">Add commentr</a>  <a href='#'>Share</a>
</div>
<ul class="addcommentbox">
    <li class="commentlist">
        <div class="CommentBox">
            <div class="CommentBoxPicBox">
                <a href="">
                    <img src="" />
                </a>
            </div>
            <div class="CommentBoxTextBox">
                <div class="CommentBoxTextBoxName">Name</div>
                <div class="CommentBoxTextBoxText">Some lovely text inside a lovely div</div>
                <div class="CommentBoxTextBoxTime">x minutes ago - <a href="#">Like</a>
                </div>
            </div>
        </div>
    </li>
</ul>

Я установил CSS для «CommentBox» display:none; , чтобы он был невидимым, и мой jQuery: $(".commentbox").show();

Именно так jQuery выбирает правильный div, который был запущен по ссылке, не видимой в приведенном выше коде, но называемой «.commentadd». Я везде искал jquery.net форум, и я нашел этот небольшой фрагмент кода.

 $(".addcomment").click(function(){
    var $this = $(this);
    var child = $this.find('.addcommentbox').html();
    $(child).show();
});

РЕДАКТИРОВАТЬ: Извините, что это так неточно… Я сразу отредактирую его и уточню для вас..
Итак, хорошо.. Я получаю все последние действия и статусы, и я даю всем им эту структуру HTML выше. Я хочу, чтобы, когда кто-то нажимает «Нравится», «комментарий» или «поделиться», тогда только то действие, которое они нажали, запрашивается через некоторый ajax и вставляется в базу данных.

Комментарии:

1. Не могли бы вы выразиться немного точнее? Я понятия не имею, о чем ты пытаешься спросить…

2. Хорошо, и что не так с найденным вами кодом, не могли бы вы, пожалуйста, предоставить нам больше вашего кода и подробно описать, в чем вы хотите, чтобы мы вам помогли

Ответ №1:

 $(".addcomment").click(function(){
    $('.CommentBox').show();
});

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

Ответ №2:

Поскольку я не знаю вашу структуру HTML, я думаю, вы пытаетесь показать DIV, не зная идентификатора.

 $(".addcomment").click(function(){
    $(this).parent().find('.CommentBox').show();
});

Не могли бы вы опубликовать свою структуру HTML (в том числе where .addcomment is), чтобы я мог заставить код работать?

Ответ №3:

Ваш javascript не совпадает с вашим HTML, так как все классы разные, но в опубликованном вами скрипте:

  $(".addcomment").click(function(e){

    e.preventDefault();

    var $this = $(this);
    var child = $this.find('.addcommentbox').html();
    $(child).show();
 });

дочерний элемент — это текстовый узел, а не список элементов jQuery. Удалите .html() с конца, и это покажет div с классом «addcommentbox». В другом примечании вы можете добавить e.preventDefault(); чтобы предотвратить действие по умолчанию при нажатии на ссылку (как я добавил выше).

Ответ №4:

Вы можете добавить разные «id» в свои «div» и сопоставить «id» следующим образом :

 $("#my_id").show(); // or you can use "toggle" to show/hide

Подробные сведения:

 $(".addcomment").click(function(){
     $("#"   $(this).attr('id')).show(); // or toggle
});

Надеюсь, мой ответ ясен, я не знаю…

Комментарии:

1. я не знаю, то ли это, что я ищу. я немного обновил свой пост. но то, что я ищу, — это способ — или сценарий для — выбора правильного .addcommentbox из многих. думайте об этом как о почти идентичной системе на facebook 🙂

Ответ №5:

Я думаю, что проблема в вашей структуре html. Если вы можете обернуть весь свой раздел «добавить комментарий» и «поле комментариев» в оболочку, вы можете выбрать его без проблем.

Смотрите этот пример jsfiddle

Метки: ,