JQuery：.dialog() 不适用于 .classe 选择器的下一个元素

Posted 2023-05-08

【中文标题】JQuery：.dialog() 不适用于 .classe 选择器的下一个元素

【英文标题】：JQuery : .dialog() not working for next element of .classe selector

【发布时间】：2018-12-24 12:55:05

【问题描述】：

我使用 php while 循环来生成一些带有少量描述的项目。 每个项目都有相同的类别，并且前面有一个它的图像。

目标是在我单击相应的图像时打开一个包含项目描述的对话框。

这就是我所做的：

使用所有图片生成所有项目：

        while($result = $req->fetch()) ?>
                <img src="./css/images/icon/<?=$result['category']?>/<?=$result['rarity']?>"  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");
    );

但是什么都没有出现，控制台也没有显示任何错误...

你能帮帮我吗？ 提前谢谢你。

【参考方案1】：

几个问题。主要的一个是你从来没有真正告诉对话框打开（通过使用.dialog("open")。第二个是你最终会得到大量的对话框 - 每个img 一个，因为你在重复这个段落.descr_obj 类的每个实例都将拥有它自己的。

试试这样的（我的 php 很烂，所以可能是错的）：

while($result = $req->fetch()) ?>
    <img src="./css/images/icon/<?=$result['category']?>/<?=$result['rarity']?>" 
          
       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>