尝试将 fancybox 中的 data-caption 设置为动态的，但带有转义撇号的变量不会输出正确的标题格式

Question

我正在尝试在 fancybox3 的 data-caption 属性中动态显示我的图像信息。它很长，我不确定如何改变它，所以它不可怕。具体问题是，当它从 mysql 数据库中获取可能包含特殊字符（如 ' 或 "）的信息时，data-caption 认为它正在关闭，而这不是我想要的。

我试过将很长的 echo 语句分成多个，但这并没有改变任何东西。我试图为 data-caption 添加字符串，“.$var”。这并没有奏效。我曾尝试在变量声明期间使用 mysqli_real_escape() 并且在尝试输出数据库信息时它不会更改功能。

<table style="margin:1em auto;">
        <?php
        //  require_once('DB_connection.php');

        $j = 0;

        while ($fetch_all_posts =  mysqli_fetch_assoc($all_posts)) {


            if ($j % 3 == 0) {
                echo "<tr>";
            }
            $getUser = $fetch_all_posts['userName'];
            $getPostID = $fetch_all_posts['postID'];
            $getDateUploaded = $fetch_all_posts['dateUploaded'];
            $getImg = $fetch_all_posts['img']; //dont really need
            $getLocation = mysqli_real_escape_string($connection,$fetch_all_posts['location']);
            $getCaption = mysqli_real_escape_string($connection,$fetch_all_posts['caption']);
            $getImageMetadata = mysqli_real_escape_string($connection,$fetch_all_posts['imageMetadata']);
            $getCameraGearPost = mysqli_real_escape_string($connection,$fetch_all_posts['cameraGearPost']);
            $getPhotoEdit = mysqli_real_escape_string($connection,$fetch_all_posts['photoEdit']);
            $getCopyright = mysqli_real_escape_string($connection,$fetch_all_posts['copyright']);


            //grab user profile pic from user table
            $sql_profilePic = "SELECT * FROM $dbtableUser WHERE userName = '$getUser' ";
            $all_users = mysqli_query($connection, $sql_profilePic);
            $fetch_all_users = mysqli_fetch_assoc($all_users);

            //change data caption's userName link   also incorrectly interprets '  " for datacaption
            echo "<td><br/><br/><br/><br/><a data-fancybox='images' data-caption= '<h1><a href=Profile.php><img id=profpic src=$fetch_all_users[profilePic] height=auto width=100px>   $getUser</a></h1> <br/> <h5>@$getLocation</h5>  <hr/> <br/> <h5>$getCaption</h5>   <br/> <h5>$getImageMetadata</h5> <br/> <h5>$getCameraGearPost</h5> <br/><h5>$getPhotoEdit<h5> <br/><br/><br/> <h6>PostID: $getPostID </h6> <br/>Copyrighted: $getCopyright <br/> $getDateUploaded <br/>'  href ='$getImg'>   <img id=postPics src='$getImg' alt='$getCaption'</a>  </td>";


            if ($j % 3 == 2) {
                echo "</tr>";
            }
            $j++;
        }
        ?>
    </table>

我希望在单击图像时它会适当地显示带有特殊字符的 data-caption。

this link, https://ibb.co/QK3Nkfw 显示页面当前的样子，第一张图片是问题所在，我希望它与其他图片一样。单击图像后，它应该显示如下数据：https://ibb.co/qnTJYf3

Answer 1

htmlspecialchars()就是答案https://www.php.net/manual/en/function.htmlspecialchars.php

此外，学习调试您的代码 - 如果您使用开发人员工具检查生成的 html 代码，我可以保证您会看到您的 html 已损坏（由于未转义字符)

尝试将 fancybox 中的 data-caption 设置为动态的，但带有转义撇号的变量不会输出正确的标题格式

Attempting to set data-caption in fancybox to be dynamic, but variables with escaped apostrophes do not out put the correct format for caption

html

php

dynamic

fancybox