Jquery แสดง div ในลูปโพสต์?

ฉันมีสคริปต์ง่ายๆ นี้เพื่อแสดง div onclick อย่างไรก็ตาม โค้ดนี้อยู่ในการวนซ้ำของโพสต์ ซึ่งทำให้สคริปต์เสียหาย แน่นอนว่าเนื่องจากลิงก์และ 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 ให้องค์ประกอบของคุณไม่ซ้ำกัน ฉันไม่คุ้นเคยกับ Wordpress 100% แต่โค้ด 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