jQuery：.dialog（）不适用于.classe选择器的下一个元素

Question

I use a php while loop to generate some items with a litle description. Each item has the same class and are preceded by an image of it.

The objective is to open a dialog that contains the description of the item when I click on the corresponding image.

This is what I've done:

Generate all items with all pictures:

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

Generate JQuery dialog:

$(".descr_obj").dialog({
        autoOpen: false
    })

    $(".obj").click(function(){
        text = $(this).next(".descr_obj").text();
        $(text).dialog("open");
    });

But nothing is appearing and the console doesn't show any error...

Can you please, help me? Thank you in advance.

Answer 1

Couple of issues. The main one is that you never actually tell the dialog to open (by using .dialog("open") . The second one is you're going to end up with a ton of dialogs - one for each img because you're repeating the paragraph. Each instance of the descr_obj class will get it's own.

Try something like this (my php sucks, so it's probably wrong):

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>

But here is what it the JavaScript would end up looking like:

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