Jquery показывает div в цикле сообщений?

У меня есть этот очень простой скрипт, чтобы показать div по клику. Однако этот код находится в постцикле, что приводит к поломке скрипта. Очевидно, что несколько ссылок и элементов div имеют один и тот же класс и идентификатор. Как я могу заставить этот скрипт работать для каждого отдельного сообщения на странице с несколькими сообщениями? Нужно ли мне делать foreach? Также прочитайте что-нибудь о добавлении класса в jquery. Кто-нибудь может мне помочь?

<style>
div.custhide{display:none;}
</style>

<script>
 function setVisibility(id, visibility) {
    document.getElementById(id).style.display = visibility;
    }
</script>


    <a class="my-post-like" onclick="setVisibility('custhide', 'inline');";>Click here to see</a>
    <div itemprop="location" itemscope itemtype="http://schema.org/Place" class="custhide" id="custhide">
    Content hidden.
    </div>

wordpress loops jquery
person RobbertT    schedule 25.08.2015    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Поскольку вы пометили его с помощью jQuery, используйте обработчик событий jQuery, который покажет следующий элемент нажатой привязки.

jQuery(function($) {
  $('.my-post-like').click(function() {
    $(this).next().show()
  })
})
div.custhide {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a class="my-post-like">Click here to see</a>
<div itemprop="location" itemscope itemtype="http://schema.org/Place" class="custhide">
  Content hidden.
</div>
<a class="my-post-like">Click here to see</a>
<div itemprop="location" itemscope itemtype="http://schema.org/Place" class="custhide">
  Content hidden.
</div>
<a class="my-post-like">Click here to see</a>
<div itemprop="location" itemscope itemtype="http://schema.org/Place" class="custhide">
  Content hidden.
</div>
<a class="my-post-like">Click here to see</a>
<div itemprop="location" itemscope itemtype="http://schema.org/Place" class="custhide">
  Content hidden.
</div>

Если вы не хотите использовать jQuery (поддерживается в IE9+)

function setVisibility(el, visibility) {
  el.nextElementSibling.style.display = visibility;
}
div.custhide {
  display: none;
}
<a class="my-post-like" onclick="setVisibility(this, 'inline');" ;>Click here to see</a>
<div itemprop="location" itemscope itemtype="http://schema.org/Place" class="custhide">
  Content hidden.
</div>
<br />
<a class="my-post-like" onclick="setVisibility(this, 'inline');" ;>Click here to see</a>
<div itemprop="location" itemscope itemtype="http://schema.org/Place" class="custhide">
  Content hidden.
</div>
<br />
<a class="my-post-like" onclick="setVisibility(this, 'inline');" ;>Click here to see</a>
<div itemprop="location" itemscope itemtype="http://schema.org/Place" class="custhide">
  Content hidden.
</div>
<br />
<a class="my-post-like" onclick="setVisibility(this, 'inline');" ;>Click here to see</a>
<div itemprop="location" itemscope itemtype="http://schema.org/Place" class="custhide">
  Content hidden.
</div>
<br />

person Arun P Johny    schedule 25.08.2015

arrow_upward
0
arrow_downward

поскольку несколько ссылок и div имеют один и тот же класс и идентификатор

Несколько элементов с одним и тем же id являются недопустимой разметкой, поэтому в этот момент любое поведение JavaScript в этой разметке становится неопределенным. Итак, первая задача — это исправить.

Дайте вашим элементам уникальные id значения. Я не на 100% знаком с Wordpress, но работает ли PHP-код в этом цикле? На простом PHP это может выглядеть примерно так:

<a class="my-post-like" onclick="setVisibility('custhide<?php echo $i ?>', 'inline');";>Click here to see</a>
<div itemprop="location" itemscope itemtype="http://schema.org/Place" class="custhide" id="custhide<?php echo $i ?>">
Content hidden.
</div>

Обратите внимание на добавленное значение $i к каждому id. Это предполагает, что цикл в коде на стороне сервера имеет некоторое увеличивающееся значение $i. Если у него есть что-то еще, используйте это что-то еще. (Может быть, идентификатор объектов/записей, по которым зацикливается код?)

В любом случае, идея состоит в том, чтобы добавить некоторое значение, которое отличается на каждой итерации цикла, что делает значения id на стороне клиента разными.

Как только это будет исправлено и разметка снова станет действующей, я подозреваю, что код на стороне клиента, который у вас есть, по-прежнему будет работать без изменений.

person David    schedule 25.08.2015