JQuery: переключать вновь созданные ссылки DIV -> на $ (this) вместо $ (this) .closest () - PullRequest
Новая
       7

JQuery: переключать вновь созданные ссылки DIV -> на $ (this) вместо $ (this) .closest ()

0 голосов
/ 01 января 2019

У меня есть ссылка «Ответить» в разделе комментариев.При нажатии на ссылку появится окно комментария.Если я нажму кнопку «Ответить», я хочу, чтобы это (и все остальные поля для комментариев) исчезли.В настоящее время он не исчезает и продолжает открывать другие поля для комментариев. 

$('.replylink').click(function(event){ // Create comment box after clicking reply
event.stopPropagation();
var commentBox = $('<div class="comment-box"></div>');
$(this).closest('div').after(commentBox);
});

Я попробовал несколько вещей с toggle (), но если я, например, 

$($(this).closest('div').after(commentBox)).toggle();

, он переключитссылка «ответить».Таким образом, ссылка для ответа исчезнет, ​​и появится окно для комментариев.Я не понимаю, как переключать только поле для комментариев.Кто-нибудь может помочь новичку?Thnx!

1 Ответ

0 голосов
/ 01 января 2019

Приведенный ниже код откроет .comment-box, если он не существует, и удалит его, если он существует для отдельных потоков.

Я добавил класс для вашей функции .closest(), еслиВы просто ищете div, тогда это довольно широко!Если вы добавите класс, вы найдете его гораздо лучше - например, тогда вы можете добавить несколько div-ов и упаковщиков между вашей ссылкой ответа и оболочкой.Возможно, вам не нужно делать это сейчас ... но вы можете сделать это в будущем!Это означает, что ваш код более перспективен.

Я прокомментировал код ниже.Он будет работать для нескольких потоков / разделов комментариев на одной странице, но также будет отлично работать для отдельной области комментариев.

Я также добавил поле комментария к .before() ссылке ответа, а не .after()... Это было более естественно с точки зрения пользовательского интерфейса, но, очевидно, это чисто стилистическое изменение.

Демо 

// Create comment box after clicking reply
$('.replylink').click(function(event) {

  // Stop default action for click (i.e. going to top of page)
  event.preventDefault();

  // Set wrapping thread div
  // this lets you have multiple threads on the same page (if needed)
  thread = $(this).closest("div.thread");

  // Check if thread has an opened comment box
  if (thread.find(".comment-box").length > 0) {

    // Delete any comment-box within this comment thread
    thread.find(".comment-box").remove();


  } else {

    // Uncomment the line below if you want to close all other comment boxes
    // $(".comment-box").remove();

    // Create a coment box if it doesn't exist
    var commentBox = $('<div class="comment-box"></div>');
    $(this).before(commentBox);

  }

});
.comment-box {
  height: 20px;
  padding: 10px;
  border: 1px solid blue;
  margin-bottom: 10px;
}

.thread {
  border: 1px black solid;
  padding: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="thread">
  <h3>Thread One</h3>
  <a href="#" class="replylink">Reply</a>
</div>

<div class="thread">
  <h3>Thread Two</h3>
  <a href="#" class="replylink">Reply</a>
</div>

<div class="thread">
  <h3>Thread Three</h3>
  <a href="#" class="replylink">Reply</a>
</div>
...