Question

我正在建立一个注册页面，允许您将帐户注册到我的uni项目的mysql数据库。

在此页面中，您还可以选择＆＃39;你的头像图片。以下是代码：

                        <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，这样我就可以保存它了？

由于

Answer 1

你也可以展示你的CSS代码吗？

或者你可以在jQuery select and unselect image找到你的答案

Answer 2

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

在PHP中创建getImages API：以json数组输出数据。
您使用javascript调用此api并使用json生成DOM
您在javascript中创建了一个点击处理程序并再次调用PHP中的API
您在PHP中获取json数据并将其保存在db

：）

Answer 3

我的建议是使用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（如果您还没有）。您可以向表单添加hidden类型的输入，并通过提交时的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

图片OnClick到Javascript函数

3 个答案:

你也可以展示你的CSS代码吗？