[英]JQuery : .dialog() not working for next element of .classe selector
我使用php while循環來生成一些帶有點描述的項目。 每個項目都具有相同的類別,並在其前面帶有圖像。
目的是打開一個對話框,其中包含當我單擊相應圖像時該項目的描述。
這是我所做的:
生成所有圖片的所有項目:
while($result = $req->fetch()) {?>
<img src="./css/images/icon/<?=$result['category']?>/<?=$result['rarity']?>" alt="<?=$result['object']?>" title="<?=$result['object']?>" class="obj">
<p class="descr_obj">
Name : <?=$result['objet']?><br><br>
Rarity : <?=str_replace(".png", "", $result['rarity'])?><br><br>
Description :<br>
<?=$result['description']?>
</p>
<?php }?>
生成JQuery對話框:
$(".descr_obj").dialog({
autoOpen: false
})
$(".obj").click(function(){
text = $(this).next(".descr_obj").text();
$(text).dialog("open");
});
但是什么也沒出現,控制台也沒有顯示任何錯誤...
你能幫我么? 先感謝您。
幾個問題。 主要的一點是,您實際上從不會告訴對話框要打開(通過使用.dialog("open")
,第二個是您最終將獲得大量對話框-每個img
一次,因為您要重復descr_obj
類的每個實例都會擁有它自己的段落。
嘗試這樣的事情(我的php很爛,所以可能是錯誤的):
while($result = $req->fetch()) {?>
<img src="./css/images/icon/<?=$result['category']?>/<?=$result['rarity']?>"
alt="<?=$result['object']?>"
title="<?=$result['object']?>"
class="obj"
data-name="<?=$result['objet']?>"
data-rarity="<?=str_replace(".png", "", $result['rarity'])?>"
data-desc="<?=$result['description']?>">
<?php }?>
<p class="descr_obj">
Name : <span class="name"></span><br><br>
Rarity : <span class="rarity"></span><br><br>
Description :<br>
<span class="desc"></span>
</p>
但是,JavaScript最終看起來像這樣:
$(function() { let dialog = $(".descr_obj").dialog({ autoOpen: false }); $(".obj").click(function() { for(let prop of Object.keys(this.dataset)) { dialog.find(`span.${prop}`).html(this.dataset[prop]); } dialog.dialog("open") }); });
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <img src="https://i.stack.imgur.com/4fDk5.png" data-name="one" data-rarity="Super Rare" data-desc="Amazing" class="obj"> <img src="https://i.stack.imgur.com/xBUJX.png" data-name="two" data-rarity="Common" data-desc="Meh" class="obj"> <p class="descr_obj"> Name : <span class="name"></span><br><br> Rarity : <span class="rarity"></span><br><br> Description :<br> <span class="desc"></span> </p>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.