Jquery tampilkan div di loop posting?

Saya memiliki skrip yang sangat sederhana untuk menampilkan div saat diklik. Namun kode ini berada dalam loop posting, yang menyebabkan skrip rusak. Tentunya karena beberapa link dan div memiliki kelas dan id yang sama. Bagaimana saya bisa membuat skrip ini berfungsi untuk setiap posting untuk halaman dengan banyak posting? Apakah saya perlu melakukan foreach? Baca juga sesuatu tentang menambahkan kelas di jquery. Adakah yang bisa membantu saya?

<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 sumber

Jawaban (2)


arrow_upward
2
arrow_downward

Karena Anda telah menandainya dengan jQuery, gunakan event handler jQuery yang akan menampilkan elemen berikutnya dari jangkar yang diklik

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>

Jika Anda tidak ingin menggunakan jQuery (didukung di 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

karena beberapa tautan dan div memiliki kelas dan id yang sama

Beberapa elemen dengan id yang sama merupakan markup yang tidak valid, sehingga pada saat itu perilaku JavaScript apa pun pada markup tersebut menjadi tidak terdefinisi. Jadi perhatian pertama adalah memperbaikinya.

Berikan elemen Anda nilai id yang unik. Saya tidak 100% paham dengan Wordpress, tetapi apakah kode PHP berfungsi di loop ini? Dalam PHP biasa, mungkin terlihat seperti ini:

<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>

Catat nilai $i yang ditambahkan ke setiap id. Ini dengan asumsi bahwa loop dalam kode sisi server memiliki nilai $i yang bertambah. Jika ada sesuatu yang lain, gunakanlah sesuatu yang lain. (Mungkin pengidentifikasi untuk objek/catatan tempat kode diulang?)

Apa pun pilihannya, idenya adalah menambahkan beberapa nilai yang berbeda di setiap iterasi perulangan, sehingga membuat nilai id sisi klien berbeda.

Setelah diperbaiki dan markupnya valid kembali, saya menduga kode sisi klien yang Anda miliki saat ini akan tetap berfungsi tanpa modifikasi.

person David    schedule 25.08.2015