jQuery的组件不是彩色动画和ajax

Question

我是jQuery的新手，我正在尝试创建一个不同颜色的页面，当我们点击任何一个时，它都会更改导航栏和页脚的背景色，并使用ajax更新MYSQL数据库。这是我的jQuery代码：

$(document).ready(function() {
    $('[name="personal_theme_color"]').click(function() {
        var a = $('[name="personal_theme_color"]').val();
        switch (a) {
          case "pink":
            var b = "#e91e63";
            break;
          case "purple":
            b = "#9c27b0";
            break;
          case "deep-purple":
            b = "#673ab7";
            break;
          case "indigo":
            b = "#3f51b5";
            break;
          case "light-blue":
            b = "#03a9f4";
            break;
          case "cyan":
            b = "#00bcd4";
            break;
          case "green":
            b = "#4caf50";
            break;
          case "light-green":
            b = "#8bc34a";
            break;
          case "lime":
            b = "#cddc39";
            break;
          case "yellow":
            b = "#ffeb3b";
            break;
          case "amber":
            b = "#ffc107";
            break;
          case "orange":
            b = "#ff9800";
            break;
          case "deep-orange":
            b = "#ff5722";
            break;
          case "brown":
            b = "#9e9e9e";
            break;
          case "grey":
            b = "#9e9e9e";
        }
        $(".nav-wrapper").animate({
            backgroundColor: b
        });
        $("footer").animate({
            backgroundColor: b
        });
        $.ajax({
            type: "POST",
            url: "jsp/update_user_theme.php",
            data: "theme=" + a,
            cache: false,
            success: function(a) {
                alert("Updated successfully");
            }
        });
    });
});

这就是我的密码。我不知道它有什么问题，但我真的需要帮助。注意：我已经包含了jQuery彩色动画插件

我的PHP代码：

<?php
    require_once('http://' . $_SERVER['SERVER_NAME'] . '/sp/conn.php');
    $theme = mysqli_fetch_array($dbc, trim(htmlentities($_POST['theme'])));
    // Now update  query
    $query = "UPDATE user set theme = '$themecolor', hex2 = '$hex' WHERE id = '" . $_COOKIE['id'] . "'";
    mysqli_query($dbc, $query);
?>

p.S.我也非常感谢在PHP代码本身方面提供一些帮助，尤其是使其具有SQL注入的功能。提前谢谢祝度过美好的一天

编辑：HTML。我使用foreach循环从数组中获取这些值。但是这个html是硬编码的（来自chrome的view-source:）。请参阅标签和输入标签的类和值的差异

<label class="personal_theme_label">
  <div class="style_personal_img pink waves-effect waves-light z-depth-1">
    <br>
    <br>
    <font style="text-transform: capitalize;">
      pink
    </font>
  </div>
  <input name="personal_theme_color" type="radio" class="with-gap" id="test1" value="pink" />
</label>
<label class="personal_theme_label">
  <div class="style_personal_img purple waves-effect waves-light z-depth-1">
    <br>
    <br>
    <font style="text-transform: capitalize;">
      purple
    </font>
  </div>
  <input name="personal_theme_color" type="radio" class="with-gap" id="test1" value="purple" />
</label>
<label class="personal_theme_label">
  <div class="style_personal_img deep-purple waves-effect waves-light z-depth-1">
    <br>
    <br>
    <font style="text-transform: capitalize;">
      deep-purple
    </font>
  </div>
  <input name="personal_theme_color" type="radio" class="with-gap" id="test1" value="deep-purple" />
</label>
<label class="personal_theme_label">
  <div class="style_personal_img indigo waves-effect waves-light z-depth-1">
    <br>
    <br>
    <font style="text-transform: capitalize;">
      indigo
    </font>
  </div>
  <input name="personal_theme_color" type="radio" class="with-gap" id="test1" value="indigo" />
</label>
<label class="personal_theme_label">
  <div class="style_personal_img blue waves-effect waves-light z-depth-1">
    <br>
    <br>
    <font style="text-transform: capitalize;">
      blue
    </font>
  </div>
  <input name="personal_theme_color" type="radio" class="with-gap" id="test1" value="blue" />
</label>
<label class="personal_theme_label">
  <div class="style_personal_img light-blue waves-effect waves-light z-depth-1">
    <br>
    <br>
    <font style="text-transform: capitalize;">
      light-blue
    </font>
  </div>
  <input name="personal_theme_color" type="radio" class="with-gap" id="test1" value="light-blue" />
</label>
<label class="personal_theme_label">
  <div class="style_personal_img cyan waves-effect waves-light z-depth-1">
    <br>
    <br>
    <font style="text-transform: capitalize;">
      cyan
    </font>
  </div>
  <input name="personal_theme_color" type="radio" class="with-gap" id="test1" value="cyan" />
</label>
<label class="personal_theme_label">
  <div class="style_personal_img green waves-effect waves-light z-depth-1">
    <br>
    <br>
    <font style="text-transform: capitalize;">
      green
    </font>
  </div>
  <input name="personal_theme_color" type="radio" class="with-gap" id="test1" value="green" />
</label>
<label class="personal_theme_label">
  <div class="style_personal_img light-green waves-effect waves-light z-depth-1">
    <br>
    <br>
    <font style="text-transform: capitalize;">
      light-green
    </font>
  </div>
  <input name="personal_theme_color" type="radio" class="with-gap" id="test1" value="light-green" />
</label>
<label class="personal_theme_label">
  <div class="style_personal_img lime waves-effect waves-light z-depth-1">
    <br>
    <br>
    <font style="text-transform: capitalize;">
      lime
    </font>
  </div>
  <input name="personal_theme_color" type="radio" class="with-gap" id="test1" value="lime" />
</label>
<label class="personal_theme_label">
  <div class="style_personal_img yellow waves-effect waves-light z-depth-1">
    <br>
    <br>
    <font style="text-transform: capitalize;">
      yellow
    </font>
  </div>
  <input name="personal_theme_color" type="radio" class="with-gap" id="test1" value="yellow" />
</label>
<label class="personal_theme_label">
  <div class="style_personal_img amber waves-effect waves-light z-depth-1">
    <br>
    <br>
    <font style="text-transform: capitalize;">
      amber
    </font>
  </div>
  <input name="personal_theme_color" type="radio" class="with-gap" id="test1" value="amber" />
</label>
<label class="personal_theme_label">
  <div class="style_personal_img orange waves-effect waves-light z-depth-1">
    <br>
    <br>
    <font style="text-transform: capitalize;">
      orange
    </font>
  </div>
  <input name="personal_theme_color" type="radio" class="with-gap" id="test1" value="orange" />
</label>
<label class="personal_theme_label">
  <div class="style_personal_img deep-orange waves-effect waves-light z-depth-1">
    <br>
    <br>
    <font style="text-transform: capitalize;">
      deep-orange
    </font>
  </div>
  <input name="personal_theme_color" type="radio" class="with-gap" id="test1" value="deep-orange" />
</label>
<label class="personal_theme_label">
  <div class="style_personal_img brown waves-effect waves-light z-depth-1">
    <br>
    <br>
    <font style="text-transform: capitalize;">
      brown
    </font>
  </div>
  <input name="personal_theme_color" type="radio" class="with-gap" id="test1" value="brown" />
</label>
<label class="personal_theme_label">
  <div class="style_personal_img grey waves-effect waves-light z-depth-1">
    <br>
    <br>
    <font style="text-transform: capitalize;">
      grey
    </font>
  </div>
  <input name="personal_theme_color" type="radio" class="with-gap" id="test1" value="grey" />
</label>

还有我的页面截图：这就是我的页面的外观

Answer 1

尝试以下更改：

$(document).ready(function () {
    // CHANGE THIS LINE --> Try adding the "input" and remove the quotes (not 100% necessary)
    $("input[name=personal_theme_color]").click(function () {
        // CHANGE THIS LINE --> Use "$(this)" to localize the selection
        var ptcval = $(this).val();
        // ADD THIS LINE --> Make "var color" a preset
        // You could also just do "var color;"
        var color = "#FFF";
        switch (ptcval) {
            case "pink":
                // CHANGE THIS LINE --> adding "var color" here will only work if click "pink"
                color = '#e91e63';
                break;
            case "purple":
                color = '#9c27b0';
                break;
            case "deep-purple":
                color = "#673ab7";
                break;
            case "indigo":
                color = "#3f51b5";
                break;
            case "light-blue":
                color = "#03a9f4";
                break;
            case "cyan":
                color = "#00bcd4";
                break;
            case "green":
                color = "#4caf50";
                break;
            case "light-green":
                color = "#8bc34a";
                break;
            case "lime":
                color = "#cddc39";
                break;
            case "yellow":
                color = "#ffeb3b";
                break;
            case "amber":
                color = "#ffc107";
                break;
            case "orange":
                color = "#ff9800";
                break;
            case "deep-orange":
                color = "#ff5722";
                break;
            case "brown":
                color = "#9e9e9e";
                break;
            case "grey":
                color = "#9e9e9e";
                break;
        }
        $('.nav-wrapper').animate({
            backgroundColor : color
        });
        $('footer').animate({
            backgroundColor : color
        });
        $.ajax({
            type: "POST",
            url: 'jsp/update_user_theme.php',
            // CHANGE THIS LINE --> send an object instead of string
            data: { theme: ptcval },
            cache: false,
            success: function (response) {
                alert('Updated successfully');
            }
        });
    });
});

选项2:一个更直观的方法是在包含十六进制值的单选按钮上创建data属性：

<input name="personal_theme_color" type="radio" class="with-gap" value="cyan" data-color="#00bcd4" />
<input name="personal_theme_color" type="radio" class="with-gap" value="pink" data-color="#e91e63" />
<input name="personal_theme_color" type="radio" class="with-gap" value="purple" data-color="#9c27b0" />
<input name="personal_theme_color" type="radio" class="with-gap" value="orange" data-color="#ff9800" />
<script>
    $(document).ready(function () {
        $("input[name=personal_theme_color]").click(function(e) {
            // Assign the object
            var thisObj =   $(this);
            // Extract the color from the data-color attribute
            var color   =   thisObj.data('color');
            // Get the value of the radio button
            var value   =   thisObj.val();
            // Assign the url
            var url     =   'jsp/update_user_theme.php';
            $('.nav-wrapper').animate({
                backgroundColor : color
            });
            $('footer').animate({
                backgroundColor : color
            });
            $.ajax({
                type: "POST",
                url: url,
                data: { theme: value },
                cache: false,
                success: function (response) {
                    console.log(response);
                    alert('Updated successfully');
                }
            });
        });
    });
</script>

在php方面，您需要确保值使用绑定参数（请参阅手册http://php.net/manual/en/mysqli-stmt.bind-param.php，我使用PDO，所以我不想在那里提供jenky解决方案）：

<?php
    // I would suggest using __DIR__ relative to this file instead of the $_SERVER
    require_once(__DIR__.'/sp/conn.php');
    $theme = mysqli_fetch_array($dbc, trim(htmlentities($_POST['theme'])));
    // You may want to use $_SESSION instead of $_COOKIE
    $query = "UPDATE user set theme = '$themecolor', hex2 = '$hex' WHERE id = '" . $_COOKIE['id'] . "'";
    mysqli_query($dbc, $query);

Answer 2

我正在添加另一件事，我的另一位伙伴已经为您提供了解决方案。

如果您没有使用绑定参数，那么您必须使用mysqli_real_escape_string（）进行输入，例如：

$theme = mysqli_real_escape_string($con, $_POST['theme']);
$hex2 = mysqli_real_escape_string($con, $_POST['hex2']);
$cookieID = mysqli_real_escape_string($con, $_COOKIE['id']);