Image OnClick to Javascript 函數

Question

我正在制作一個注冊頁面，允許您為我的 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 以便我可以保存它？

謝謝

Answer 1

你也可以展示你的 CSS 代碼嗎？

或者你可以在這里找到jQuery select and unselect image your answer

Answer 2

您必須考慮您的應用程序設計。 混合使用 PHP 和 Javascript 並不是最好的主意。 使用 API 而不是混合代碼。 您可以使用 Ajax 調用此 API。 我認為這是一個很好的設計選擇：

1. 在 PHP 中創建一個 getImages API：您將數據輸出到一個 json 數組中。
2. 你用javascript調用這個api並用json生成DOM
3. 您在 javascript 中創建一個點擊處理程序並在 PHP 中再次調用一個 API
4. 您在 PHP 中獲取 json 數據並將其保存在您的數據庫中

:)

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獲取值