Используя jQuery для поиска атрибута, затем выполняйте функцию только на основе атрибута

Question

Хорошо, теперь я понимаю, как использовать атрибут, теперь я хочу, чтобы jQuery нашел используемый им атрибут и использовал его, чтобы открывать только одно поле для комментариев за раз

html:

<div class="commentopen" id="1">Comment</div>
<div class="comment" id="1"><textarea>write a comment...</textarea></div>
<div class="commentopen" id="2">Comment</div>
<div class="comment" id="2"><textarea>write a comment...</textarea></div>
<div class="commentopen" id="3">Comment</div>
<div class="comment" id="3"><textarea>write a comment...</textarea></div>

У меня есть класс .comment display: none;

jquery:

$('.commentopen').click(function() {
    var id = $(this).attr('id');
    $(".comment" + id).slideDown(180, function() {
         $('#container').isotope('reLayout');
    });
});

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

Answer 1

У вас есть дубликаты в ваших идентификаторах (например, есть два элемента с идентификатором 1), разрешите это, добавив префикс:

<div class="comment" id="comment1">...

Тогда просто иди с этим:

$('#comment' + id).slideDown(...

Answer 2

Одна проблема с вашим HTML заключается в том, что вы повторяете идентификатор тегов. Идентификатор должен быть уникальным на странице HTML. Повторение одного и того же идентификатора приводит к ошибкам JavaScript.

<div class="commentopen" id="1">Comment</div>
<div class="comment" id="comment_1"><textarea>write a comment...</textarea></div>
<div class="commentopen" id="comment_2">Comment</div>
<div class="comment" id="comment_2"><textarea>write a comment...</textarea></div>
<div class="commentopen" id="comment_3">Comment</div>
<div class="comment" id="comment_3"><textarea>write a comment...</textarea></div>

и ваш javascript должен быть таким

$('.commentopen').click(function() {
    var comment = $(this).attr('id');
    $("#comment_" + id).slideDown(180, function() {
         $('#container').isotope('reLayout');
    });
});

Answer 3

У вас никогда не должно быть нескольких элементов с одинаковым id . id всегда должен быть уникальным.

Будет работать следующее:

<div class="commentopen" id="1">Comment</div>
<div class="comment" id="c1"><textarea>write a comment...</textarea></div>
<div class="commentopen" id="2">Comment</div>
<div class="comment" id="c2"><textarea>write a comment...</textarea></div>
<div class="commentopen" id="3">Comment</div>
<div class="comment" id="c3"><textarea>write a comment...</textarea></div>

и:

$('.commentopen').click(function() {
    var comment = $(this).attr('id');
    $("#c" + id).slideDown(180, function() {
         $('#container').isotope('reLayout');
    });
});

Обновление: Я исправил ошибки, указанные ниже.

Answer 4

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

посмотрите на JSFiddle здесь

решить проблему

Answer 5

Есть несколько проблем с тем, что вы делаете. Прежде всего, атрибут id должен быть уникальным на странице, поэтому он не может быть разделен между двумя элементами div (например, comment и commentopen). Вместо этого вы можете иметь один идентификатор на основе другого, например id="comment1" и id = "1" `. Тогда ваша страница будет выглядеть так:

<div class="commentopen" id="1">Comment</div>
<div class="comment" id="comment1"><textarea>write a comment...</textarea></div>
<div class="commentopen" id="2">Comment</div>
<div class="comment" id="comment2"><textarea>write a comment...</textarea></div>
<div class="commentopen" id="3">Comment</div>
<div class="comment" id="comment3"><textarea>write a comment...</textarea></div>

и ваш код jQuery будет выглядеть так:

$('.commentopen').click(function() {
 var comment = $(this).attr('id');
 $("#comment" + id).slideDown(180, function() {
      $('#container').isotope('reLayout');
  });
});

Answer 6

Если у вас есть идентификатор, вам больше не нужно будет использовать класс .comment в своем запросе

$('.commentopen').click(function() {
    var commentId = $(this).attr('id');
    $("#"+ commentId).slideDown(180, function() {
         $('#container').isotope('reLayout');
    });
});

Answer 7

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

$('.commentopen').click(function() {
    var comment = $(this).attr('id');
    $('.comment[id="' + id + '"]').slideDown(180, function() {
         $('#container').isotope('reLayout');
    });
});

Answer 8

Я думаю, что это должно быть:

$(".comment#" + id).slideDown(180, function() {
     $('#container').isotope('reLayout');
});

Обратите внимание на '#' после комментария в селекторе. Надеюсь, это поможет.

Answer 9

посмотрите на селекторы атрибутов

изменить это

$(".comment" + id).slideDown(180, function() {
     $('#container').isotope('reLayout');
});

до

$(".comment[id=" + id+"]").slideDown(180, function() {
     $('#container').isotope('reLayout');
});

Answer 10

$(".comment" + id).slideDown(180, function() {

Этот идентификатор будет прямым текстом и, следовательно, не будет работать как селектор, попробуйте это:

$(".comment #" + id).slideDown(180, function() {