Question

我有一个网站，我可以点击这样的颜色来改变主题：

<ul>
    <li>
        <span class='red'></span>
        <span class='orange'></span>
        <span class='green'></span>
    </li>
</ul>

这部分工作得很好，但是...当刷新页面时它会恢复正常，所以。

我想使用jQuery Ajax在我的数据库中保存颜色，但不确定如何将颜色onclick发送到我的jQuery函数？

$(function() {
    $('.themechange').click(function() {
        $.ajax({
           type: "POST",
           url: "http://mydomain.com/updatetheme.php",
           data: "color=somecolor",
           success: function(msg){
             alert( "Data Saved: " + msg );
           }
         });
    });
});

我不知道该怎么做并且希望得到帮助： - ）

Answer 1

尝试这样的事情：

   <ul>
        <li>
            <span class='red  themechange' data-color='red'></span>
            <span class='orange themechange'  data-color='orange'></span>
            <span class='green themechange' data-color='green '></span>
        </li>
    </ul>

Jquery的：

$(function() {
    $('.themechange').click(function() {
        $.ajax({
           type: "POST",
           url: "http://mydomain.com/updatetheme.php",
           data: "color=" + $(this).data('color'),
           success: function(msg){
             alert( "Data Saved: " + msg );
           }
         });
    });
});

Answer 2

你必须获得颜色值并在点击事件上调用ajax

http://jsfiddle.net/ZmbbA/2/

$(document).ready(function(){
    $("li").click(function(){

        alert('Here ajax happens with color: ' + $(this).attr("class"));
    /*
    $.ajax({
        type: "POST",
        url: "http://mydomain.com/updatetheme.php",
        data: { color: $(this).attr("class") }
        }).done(function( msg ) {
        alert( "Data Saved: " + msg );
    });
    */
    });
});

Answer 3

为列表元素获取相同的类：

<ul>
    <li>
        <span class='themechange' data-color='red'></span>
        <span class='themechange'  data-color='orange'></span>
        <span class='themechange' data-color='green '></span>
    </li>
</ul>

(function() {
$('.themechange').click(function() {
    $.ajax({
       type: "POST",
       url: "http://mydomain.com/updatetheme.php",
       data: "color=" + $(this).attr('data-color'),
       success: function(msg){
         alert( "Data Saved: " + msg );
       }
     });

Answer 4

在更改主题时查看正在添加的课程。它可能会添加到您的页面正文中。如果是这样，那么将该类存储到jQuery cookie中，或者您可以使用php session / cookies [通过ajax]。然后将php session / cookie变量添加到body。像这样<body class="<?php echo $_SESSION['themeName'] ?>">

使用ajax保存主题更改

4 个答案: