Image OnClick to Javascript函数

我正在制作一个注册页面，允许您为我的uni项目向mysql数据库注册一个帐户

在此页面中，您还可以“选择”您的化身图片。代码如下：

                        <u>Select your avatar:</u><br>
                        <?php

                            // open this directory 
                            $image_dir = opendir("images/avatars");

                            // get each entry
                            while( $image = readdir( $image_dir ) )
                            {
                                $dirArray[] = $image;
                            }

                            // close directory
                            closedir($image_dir);

                            //  count elements in array
                            $indexCount = count($dirArray);

                            // loop through the array of files and print them all in a list
                            for($index=0; $index < $indexCount; $index++)
                            {
                                $extension = substr($dirArray[$index], -3);

                                if( $extension == "jpg" || $extension == "gif" )
                                {
                                    //echo("<a href='#'>");
                                    echo("<img id='$index' onClick='SetAvatar($index)' img src='images/avatars/$dirArray[$index]' class='o'> ");
                                    //echo("</a>");
                                }
                            }
                        ?>

                        <script>
                            function SetAvatar(id) {
                            var image = document.getElementById(id);

                                if( CurSelectedImage != null && id != CurSelectedImage )
                                {
                                    var image_to_unselect = document.getElementById(CurSelectedImage);
                                    image_to_unselect.Selected = false;
                                    image_to_unselect.style.border = null;
                                }

                                if( image.Selected != true )
                                {
                                    image.style.border = 'medium solid blue';
                                    image.Selected = true;
                                    SelectedImage = id;
                                }
                                else
                                {
                                    image.style.border = null;
                                    image.Selected = false;
                                    SelectedImage = null;
                                }


                            }
                        </script>

选择你的化身：

函数SetAvatar（id）{
var image=document.getElementById（id）；
if（curseelectedimage！=null&&id！=curseelectedimage）
{
var image_to_unselect=document.getElementById（CurSelectedImage）；
图像_至_取消选择。选择=假；
image_to_unselect.style.border=null；
}
如果（image.Selected！=true）
{
image.style.border='中纯蓝色'；
image.Selected=true；
选择edimage=id；
}
其他的
{
image.style.border=null；
image.Selected=false；
选择edimage=null；
}
}

这将选择头像图片，使边框变蓝，并将所选图像id存储在变量中，但我如何将带有所选图像id的变量传递回php以便保存它

谢谢

您也可以显示您的CSS代码吗？ 或者你可以在这里找到

---

您的答案

您必须考虑您的应用程序设计。混合使用PHP和Javascript并不是最好的主意。使用API而不是混合代码。您可以使用Ajax调用此API。我认为这是一个很好的设计选择：

在PHP中创建getImages API：以json数组输出数据

您可以使用javascript调用此api，并使用json生成DOM

您可以在javascript中创建一个单击处理程序，然后在PHP中再次调用一个API

您可以在PHP中获取json数据并将其保存在数据库中

---

：）

我的建议是使用CSS类。删除该类的所有现有实例，然后将该类添加到选定的图像中

function SetAvatar(id) {
  //remove existing border(s) a while loop is used since elements is a live node list which causes issues with a traditional for loop
  var elements = document.getElementsByClassName("selected-avatar");
  while (elements.length > 0) {
    var element = elements.item(0);
    element.className = element.className.replace(/(?:^|\s)selected-avatar(?!\S)/g , '');
  }

  var image = document.getElementById(id);
  image.className += " selected-avatar";
}

为了传递头像值，我建议使用一个表单来传递所有注册数据以处理注册（如果您还没有）。您可以在表单中添加hidden类型的输入，并在提交时通过javascript填充值

html:

然后在php中，您可以使用$\u POST获取值

---

css我认为与此无关我知道你在说什么，但我不知道你的意思，因为我是个新手。我还不知道API是什么。如果有一种方法可以做到这一点，就像我一样，即使这不是最好的方法，我也会接受。API:和ajax:自从我回答这个问题以来，这个问题似乎已经改变了。我假设你有一个注册页面，用户在其中输入他们的注册详细信息并选择一个化身？如果是这样的话，我会把它全部作为表单的输入。表单操作是一个.php，它处理表单输入并将它们添加到数据库中。可以将所选id添加到js函数中的隐藏输入中。我认为我已经在中包含了图像，那么我如何使其成为变量，使其通过进程注册页面？我可以用cookies@ZackAntonyBucci不需要，也不是通过cookies传递数据的好设计。我将在我的回答中添加一个我所说的例子。考虑到这是一个学校项目，我强烈建议你坚持使用你所学的东西。Ajax可能是一个很好的解决方案，但如果在课程中没有教给你，你的老师就会知道出了什么问题。如果您使用了这里的答案中提供的代码，那么很有可能谷歌会在这个页面上进行粗略的搜索。

<form id="registration-form" action="process_register.php" method="put">
  <input id="registration-avatar" type="hidden" />
  <button id="registration-submit">Submit</button>
</form>

document.getElementById("registration-submit").onclick = function(){
    var avatarValue; //you'll need to write some code to populate the avatarValue based on the selected avatar image
    document.getElementById("registration-avatar").value = avatarValue;
    document.getElementById('registration-form').submit();
};