jQuery在布局之间动态切换 - jQuery to dynamically toggle between layouts

我希望有人能在这里为我指明正确的方向。我有一个简单的媒体页面，在MySql数据库中有三个布局'1', '2' and '3'。当我加载页面时，我会检查DB中设置了什么布局，并使用下面的代码来显示正确的代码块——这非常有效。现在，使用jQuery，我希望能够有3个图形按钮在3个布局之间动态切换。我想实现的是：

默认情况下，布局1被设置，图标1被设置为滚动"打开"状态
单击图标二将动态地将$album["布局"]设置为"2"并更新页面，将DB从1更新为2，并将图标一更改为滚动"关闭"状态，将图标二更改为滚动的"打开"状态
下次用户访问页面时，布局2将被设置，图标2将处于滚动"打开"状态

我对PHP还比较陌生，我刚刚开始了解jQuery，但我理解所有的基本概念，我只是想不出如何做到这一点，而且我似乎也找不到任何在线的东西来为我指明实现这一目标的正确方向。任何见解都将不胜感激。

php中用于显示正确代码块的代码

<?php
    if ($album['layout'] == 1) {
        //Display Album Layout 1
    } else if ($album['layout'] == 2) {
        //Display Album Layout 2
    } else if ($album['layout'] == 3) {
        //Display Album Layout 3
    }
?>

Ajax似乎是解决您问题的解决方案。

使用jQuery，您可以轻松地更新页面。您甚至可以切换出整个样式表，有关的更多信息，请参阅此问题

使用Ajax，您可以向服务器发送一个调用来更新存储在数据库中的值，而无需刷新页面。有关让JavaScript与PHP对话的更多信息，请参阅此问题。

示例：

显示的页面称为index.php:

<?php require_once("ajax.php"); //include your functions ?>
<html>
  <head>
    <title>Toggle</title>
    <!-- include jQuery -->
    <script 
      src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"
      type="text/javascript"></script>
    <!-- include your javascript -->
    <script src="js/functions.js" type="text/javascript"></script>
  </head>
  <body>
    <!-- This div will hold the current album layout -->
    <div id="albumLayoutDiv">
      <?php
        // Gets the album specified in $album['layout'] so it will
        // display on page load. This is defined in ajax.php
        echo GetAlbumLayout($album['layout']);
      ?>  
    </div>
    <input id="layout1" type="button" value="layout 1" /> 
    <input id="layout2" type="button" value="layout 2" /> 
    <input id="layout3" type="button" value="layout 3" /> 
  </body>
</html>

正如您所看到的，这里没有定义GetAlbumLayout，我已经将其移动到一个名为ajax.php:的外部文件中

<?php
function GetAlbumLayout($layout) {
  if ($layout == 1) {
    // UPDATE THE DATABASE TO LAYOUT 1
    return $htmlForLayout1; // Display Album Layout 1
  } else if ($layout == 2) {
    // UPDATE THE DATABASE TO LAYOUT 2
    return $htmlForLayout2; // Display Album Layout 2
  } else if ($layout == 3) {
    // UPDATE THE DATABASE TO LAYOUT 3
    return $htmlForLayout3; // Display Album Layout 3
  }
}
// Here is where we look at the values that were passed though
// Ajax. Remember the we used POST, and set the values in 'data'?
// You can see all of that here. You get the values by using 
// $_POST['key'] = value. In this case I am using "action" to 
// determine what PHP function we want to call.
// If 'action' is set from the Ajax call
if(isset($_POST['action']) && !empty($_POST['action'])) {
  $action = $_POST['action'];
  switch($action) {
    // We set action to 'changeLayout' in the Ajax call
    case 'changeLayout': 
      // likewise, we set "layoutNum" to be the number that the
      // user clicked on. We access this value in the same was as
      // the action
      GetAlbumLayout($_POST['layoutNum']);
      break;
    /* 
    case 'anotherAction' : 
      someOtherFunction();
      break; 
    */
    // ...etc... Add more here if you want to perform different
    // ajax calls down the road
  }
}
?>

现在最后是Ajax调用和将其结合在一起的Javascriptfunctions.js：

// This function fetches the layout number that we want from
// php and updates the "albumLayout" div on the page when
// successful.
function changeLayout(layoutNumber) {
  // Start the Ajax call
  $.ajax({ 
    // set the url to your ajax.php file. This is what this
    // Ajax call will POST to.
    url: '/php/ajax.php', 
    type: 'post',
    // the data can be thought of as the paramaters that you can
    // use on the PHP side of things. Think of it as a dictionary
    // or a map of values. You can pass in anything here that you
    // need in PHP to call a function
    data: {
      action: 'changeLayout', // what we want to do
      layoutNum: layoutNumber    // the layout that was requested
    },
    // After we get the results back from PHP, it is stored as a 
    // string inside of output. Ajax is async - this won't happen 
    // until the results are received from PHP. In this case, I am
    // updating the albumLayout div with the output gathered from
    // the PHP function `GetAlbumLayout(layoutNumber)`
    success: function(output) {
      $('#albumLayout').html(output);
    }
  });
}
/* document ready waits till the DOM is fully loaded to do anything */
$(document).ready(function() {
  // When the user clicks button 1
  $('#layout1').click(function() {
    changeLayout(1);
  });
  // When the user clicks button 2
  $('#layout2').click(function() {
    changeLayout(2);
  });
  // When the user clicks button 3
  $('#layout3').click(function() {
    changeLayout(3);
  });
});

我还没有测试任何提供的代码，但它应该会让你朝着正确的方向前进。基本上，您最初使用数据库中的值加载页面。用户将单击页面上的按钮来更改布局。您对服务器进行Ajax调用，使其成为数据库的默认值UPDATE，并返回要在页面上显示的新HTML。一旦成功，您就可以将页面上的HTML更新为从PHP收集的新HTML。

祝你好运！如果我误解了你的问题，请告诉我。

听起来像是一个典型的前端工作。这让你有点坐立不安，因为这个问题太宽泛了，无法直接回答。

http://jsfiddle.net/mNbLa/1/