Question

假设我有一个名为view.php的页面，如果我给出一个像view.php？q = fruit这样的参数，它会创建一个存储在数组中的水果列表。我希望更改页面中标签的内容，如果该页面中的滑块发生更改，则将其更改为该数组的内容。在上面的示例中，此数组包含：$list = array('banana', 'apple', 'orange');我希望在页面中有一个滑块，并且当用户更改滑块的值时，标签的文本将更改为“banana”，“apple”，.. 。我听说过PHP中的会话，但由于在多个选项卡中可能会有很多对此页面的调用，我认为这不是一个好主意。我怎么能这样做？

提前致谢。

Answer 1

听起来不同标签之间的唯一区别就是生成的列表。因此，除了您将要使用的列表之外，您的PHP代码不需要考虑任何内容。这是一个快速的jquery模型。使用一些CSS，也许还有一些jquery动画，你的滑块可以在没有任何页面重新加载的情况下工作。

<?php 
$list = array(
   'fruit' => array('apple','orange','banana'),
   'soemthing' => array('a', 'b', 'c')
);
?>

<div id="Label">Click one of the list items to change this</div>

<ul id="Slider">
  <?php foreach ($list[$_GET['q']] as $item) { ?>
      <li><?php echo $item; ?></li>
  <?php } ?>
</ul>

<script type="text/javascript">
   $('#Slider li').click(function() {
       $("#Label").text($(this).text());
       // you can have some other logic here to decide what to do when the slider is changed
   });
</script>

Answer 2

我认为你可以使用jquery解决方案。

将您的数组存储在jquery代码中。

然后在滑块的更改功能上调用它

像这样，

$('.slider').change(function(){


var index = $(this).index();

var label = labelsarray[index];

$('#label').data(label);

});

Answer 3

对于幻灯片我也建议像其他人一样推荐jquery，记住你也可以使用异步加载。

我不记得网址，但我看到了一个关于带有异步加载的jQuery的惊人教程。

一些关键字：js asynch，图像加载jquery，jquery滚动

尝试谷歌与jquery滚动asynch它是一个很好的教程，图像加载异步多种方式（通过悬停，点击，滚动等）。

Answer 4

行。我找到了我想要的东西。我在这里发现了一个非常整洁的滑块： http://jqueryui.com/demos/slider/

然后我在我的页面中使用了这样的：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>jQuery UI Slider - Snap to increments</title>
        <link type="text/css" href="jquery/slider.css" rel="stylesheet" />    
        <script src="jquery/jquery-1.6.1.js"></script>
        <script src="jquery/jquery-ui-1.8.13.custom.min.js"></script>


        <?php 

            $list = array('apple','orange','banana');

        ?>

        <script>
            var arrayFromPHP = <?php echo json_encode($list) ?>;
            $(function() {
                $( "#slider" ).slider({
                    value:1,
                    min: 0,
                    max: arrayFromPHP.length - 1,
                    step: 1,
                    slide: function( event, ui ) {
                        $( "#amount" ).val(arrayFromPHP[ui.value]);
                    }
                });
                $( "#amount" ).val( arrayFromPHP[$( "#slider" ).slider( "value" )] );
            });
        </script>
    </head>
    <body>

        <div class="demo">

            <p>
                <label for="amount">Current selection:</label>
                <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
            </p>

            <div id="slider"></div>

        </div>
    </body>
</html>

请注意，我使用Rob的答案作为我的来源，所有信用都归他所有。但由于它不是完全我想要的，我决定发表我自己的答案。

在页面调用之间以PHP存储数组

4 个答案: