Image OnClick to Javascript function

本文关键字：function Javascript to OnClick Image 更新时间：2023-09-26

我正在制作一个注册页面，允许您为我的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>

这会选择化身图片，使边框变蓝，并将选定的图像id存储在变量中，但我如何将具有选定图像id的变量传递回php，以便保存它？？

感谢

你也能展示你的CSS代码吗

或者你可以在这里找到jQuery选择和取消选择图像您的答案

您必须考虑您的应用程序设计。混合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";
}

要传递化身值，我建议使用表单将您的所有注册数据传递给process_register（如果您还没有）。您可以在表单中添加隐藏类型的输入，并在提交时通过javascript填充值。

html:

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

javascript:

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();
};

然后在php中，您可以使用$_POST获取值http://php.net/manual/en/reserved.variables.post.php