1. 首頁
  2. 問答
  3. jQuery的不是它的組件工作是彩色動畫和Ajax

jQuery的不是它的組件工作是彩色動畫和Ajax

2016-01-03 15 views
-1

我是一個新手，jQuery，我試圖創建具有不同顏色的頁面，當我們點擊任何一個，它改變了導航欄和頁腳和背景顏色使用AJAX來這裏更新MYSQL database.So是我jQuery代碼：jQuery的不是它的組件工作是彩色動畫和Ajax

$(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); 
?>

附：我真的很感激在PHP代碼本身的一些幫助過，尤其是對使它SQL注塑證明。預先感謝您 祝您有美好的一天

編輯： HTML。我用foreach循環從數組中獲取這些值。但是這個html是硬編碼的（從鉻的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>

而且，我的網頁截圖的差異和： This is how my page looks

來源

2016-01-03 Puru Vijay

+0

，這是什麼元素的HTML：'[NAME = \ 「personal_theme_color \」 ]'？ – Rasclatt

+0

提供點擊實際選擇正確的元件，這條線變化'變種ptcval = $（本）.VAL（）;'代替'變種ptcval = $（ 「[NAME = \」 personal_theme_color \ 「]」）VAL。 （）;' – Rasclatt

+0

做點擊功能火嗎？ – gypsyCoder

回答

2

嘗試這些變化：

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

來源

2016-01-03 06:31:29 Rasclatt

+0

就像這樣解釋 – devpro

0

我再添加一件事，我的其他伴侶已經爲您提供解決方案。

如果你不使用綁定PARAM比你必須要使用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']);

來源

2016-01-03 07:58:22 devpro

相關問題

 相關問題