Question

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

默认情况下，布局1已设置，图标1在翻转“开启”状态下设置。
点击图标2将动态地将$ album ['layout']设置为“2”并更新页面，将数据库从1更新为2，并将图标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
    }

?>

Answer 1

听起来像是一个典型的前端工作。让你成为一个小小提琴，因为这个问题有点过于宽泛而无法直接回答。

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

Answer 2

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

使用jQuery，您可以轻松更新页面。您甚至可以切换整个样式表，有关该

的更多信息，请参阅this question

使用Ajax，您可以向服务器发送调用，以更新存储在数据库中的值，而无需刷新页面。有关让JavaScript与PHP交谈的更多信息，请参阅this question。

示例：

显示的页面让我们称之为 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调用以及将它汇总到一起的Javascript functions.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。

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

jQuery在布局之间动态切换

2 个答案: