带有页面刷新功能的 jQuery PHP 库

Question

我正在尝试为我的 joomla 设置一个包含 6 张图片的自定义照片库。 当用户按下第二个按钮时，页面将被刷新，在基本 url 中添加了一个小的变化，第一个 pic 的 div 将消失，第二个图像 div 持有者将出现。

我写了一些代码，但它不起作用..

<div style="width:728px; float:left; margin-top:10px; margin-bottom:10px;">


<div style="width:728px; float:left; padding-bottom:5px; margin-top:5px;">
<div id="pic1" style="padding:2px; margin:auto;"><img src="http://www.thecrawler.gr/demos/gallery/gallery/001.jpg" width="310" height="262" /></div>
<div id="pic2" style="padding:2px; margin:auto; display:none;"><img src="http://www.thecrawler.gr/demos/gallery/gallery/1.jpg" width="310" height="234" border="0" style="margin:0 auto;" /></div>
<div id="pic3" style="padding:2px; margin:auto; display:none;"><img src="http://www.thecrawler.gr/demos/gallery/gallery/2.jpg" width="310" height="210" border="0" style="margin:0 auto;" /></div>
<div id="pic4" style="padding:2px; margin:auto; display:none;"><img src="http://www.thecrawler.gr/demos/gallery/gallery/3.jpg" width="310" height="194" border="0" style="margin:0 auto;" /></div>
<div id="pic5" style="padding:2px; margin:auto; display:none;"><img src="http://www.thecrawler.gr/demos/gallery/gallery/4.jpg" width="310" height="194" border="0" style="margin:0 auto;" /></div>
<div id="pic6" style="padding:2px; margin:auto; display:none;"><img src="http://www.thecrawler.gr/demos/gallery/gallery/5.jpg" width="310" height="210" border="0" style="margin:0 auto;" /></div>
</div>



<div style="width:300px; height:40px; float:left; margin-top:6px; margin-left:200px;">
<div class="pic1" style="width:40px; height:34px; padding-top:6px; background-color:#000; color:#FFF; text-align:center; font-family:Verdana, Geneva, sans-serif; font-size:20px; margin-right:8px; float:left; cursor:pointer;">1</div>
<div class="pic2" style="width:40px; height:34px; padding-top:6px; background-color:#000; color:#FFF; text-align:center; font-family:Verdana, Geneva, sans-serif; font-size:20px; margin-right:8px; float:left; cursor:pointer;">2</div>
<div class="pic3" style="width:40px; height:34px; padding-top:6px; background-color:#000; color:#FFF; text-align:center; font-family:Verdana, Geneva, sans-serif; font-size:20px; margin-right:8px; float:left; cursor:pointer;">3</div>
<div class="pic4" style="width:40px; height:34px; padding-top:6px; background-color:#000; color:#FFF; text-align:center; font-family:Verdana, Geneva, sans-serif; font-size:20px; margin-right:8px; float:left; cursor:pointer;">4</div>
<div class="pic5" style="width:40px; height:34px; padding-top:6px; background-color:#000; color:#FFF; text-align:center; font-family:Verdana, Geneva, sans-serif; font-size:20px; margin-right:8px; float:left; cursor:pointer;">5</div>
<div class="pic6" style="width:40px; height:34px; padding-top:6px; background-color:#000; color:#FFF; text-align:center; font-family:Verdana, Geneva, sans-serif; font-size:20px; margin-right:8px; float:left; cursor:pointer;">6</div>
</div>


<div style="clear:both;"></div>
<script type="text/javascript">
$(document).ready(function(){

var currentURL = window.location.href;
var p1 = "/1/";
var p2 = "/2/";
var p3 = "/3/";
var p4 = "/4/";
var p5 = "/5/";
var p6 = "/6/";

var p1url = window.location.href + p1;
var p2url = window.location.href + p2;
var p3url = window.location.href + p3;
var p4url = window.location.href + p4;
var p5url = window.location.href + p5;
var p6url = window.location.href + p6;



$(".pic2").click(function() {
$("#pic1").hide();
$("#pic3").hide();
$("#pic4").hide();
$("#pic5").hide();
$("#pic6").hide();
window.location.href = p2url;
$("#pic2").fadeIn("fast");
});


$(".pic3").click(function() {
$("#pic1").hide();
$("#pic2").hide();
$("#pic4").hide();
$("#pic5").hide();
$("#pic6").hide();
window.location.href = p3url;
$("#pic3").fadeIn("fast");
});

$(".pic4").click(function() {
$("#pic1").hide();
$("#pic2").hide();
$("#pic3").hide();
$("#pic5").hide();
$("#pic6").hide();
window.location.href = p4url;
$("#pic4").fadeIn("fast");
});

$(".pic5").click(function() {
$("#pic1").hide();
$("#pic2").hide();
$("#pic3").hide();
$("#pic4").hide();
$("#pic6").hide();
window.location.href = p5url;
$("#pic5").fadeIn("fast");
});

$(".pic6").click(function() {
$("#pic1").hide();
$("#pic2").hide();
$("#pic3").hide();
$("#pic4").hide();
$("#pic5").hide();
window.location.href = p6url;
$("#pic6").fadeIn("fast");
});


});
</script>
</div>

Answer 1

当使用joomla时为什么不能使用php来获取url变量，如果你想刷新页面然后摆脱window.location，因为使用可以放置锚标记看看

<style>
    .pic {
        width: 40px;
        height: 34px;
        padding-top: 6px;
        background-color: #000;
        color: #FFF;
        text-align: center;
        font-family: Verdana, Geneva, sans-serif;
        font-size: 20px;
        margin-right: 8px;
        float: left;
        cursor: pointer;
    }
    #pic1, #pic2, #pic3, #pic4, #pic5, #pic6 {
        padding:2px; margin:auto; display:none;
    }
</style>

    <div style="width:728px; float:left; margin-top:10px; margin-bottom:10px;">


       <div style="width:728px; float:left; padding-bottom:5px; margin-top:5px;">
       <div id="pic1" ><img src="http://www.thecrawler.gr/demos/gallery/gallery/001.jpg" width="310" height="262" /></div>
       <div id="pic2" ><img src="http://www.thecrawler.gr/demos/gallery/gallery/1.jpg" width="310" height="234" border="0" style="margin:0 auto;" /></div>
       <div id="pic3" ><img src="http://www.thecrawler.gr/demos/gallery/gallery/2.jpg" width="310" height="210" border="0" style="margin:0 auto;" /></div>
       <div id="pic4" ><img src="http://www.thecrawler.gr/demos/gallery/gallery/3.jpg" width="310" height="194" border="0" style="margin:0 auto;" /></div>
       <div id="pic5" ><img src="http://www.thecrawler.gr/demos/gallery/gallery/4.jpg" width="310" height="194" border="0" style="margin:0 auto;" /></div>
       <div id="pic6" ><img src="http://www.thecrawler.gr/demos/gallery/gallery/5.jpg" width="310" height="210" border="0" style="margin:0 auto;" /></div>
       </div>



       <div style="width:300px; height:40px; float:left; margin-top:6px; margin-left:200px;">
       <div class="pic" ><a href="?p=1">1</a></div>
       <div class="pic" ><a href="?p=2">2</a></div>
       <div class="pic" ><a href="?p=3">3</a></div>
       <div class="pic" ><a href="?p=4">4</a></div>
       <div class="pic" ><a href="?p=5">5</a></div>
       <div class="pic" ><a href="?p=6">6</a></div>
       </div>


        <script type="text/javascript">
       var show_image='<?php if($_REQUEST["p"]){ echo  $_REQUEST["p"];}else{ echo "1"; } ?>';
        $(document).ready(function(){
        $("#pic"+show_image).fadeIn("fast");
        });
            </script>

通过javascript获取查询字符串的其他方式见PHP has $_GET variable, what does HTML have?

    function urlParameter(name) {
        var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);
        return results[1] || 0;
    }

    var show_image;
    if (urlParameter('p')) {
        show_image = urlParameter('p')
    } else {
        show_image = 1
    }
    $(document).ready(function () {
        $("#pic" + show_image).fadeIn("fast");
    });

Answer 2

很难说你到底想做什么。但是如果你注释掉所有以window.location.href = 开头的行，你会得到一些功能：当你点击数字时，照片会随着淡出效果而改变。你还需要做什么？

下次请在http://jsfiddle.net/ 上发布您的 HTML / JavaScript，如下所示：http://jsfiddle.net/qs3Nx/

更新

好的，既然你想在重新加载页面后更改图像，试试这个：

var currentURL = window.location.href;
var splitURL = currentURL.split('?');
var baseURL = splitURL[0];
var pic = splitURL.length > 1 ? splitURL[1] : 'pic1';

$("div[id^='pic']").hide();
$("#" + pic).fadeIn('fast');

$("div[class^='pic']").click(function(){
    var newURL = baseURL + '?' + $(this).attr('class');
    window.location.href = newURL;
    console.log(newURL);
});

Answer 3

试试这段代码，它只会显示被点击的div，但不会刷新页面：

$("div[class^='pic']").click(function(){
    $("div[class^='pic']").hide();
    $(this).show();
})

小提琴代码：http://jsfiddle.net/9r3Fu/1/