以前にこの質問を作成しましたが、別の方法で回答がありませんでした。だから今日、私の問題を明確な方法で共有するためにいくつかの簡単なコードを書きました。
- 以前
jQueryは画像スライドショー関数を呼び出していました。 - の AJAX 関数
show.phpが呼び出さget.phpれ、結果が DIV に出力されます。
私の問題は、によって提供される DIV 内でのスライド (前 - 次) がget.phpでは機能しないことですshow.php。しかしget.php、ブラウザで直接呼び出すと、機能します。
私は混乱しています.AJAXを呼び出すときにdivにエラーがあると思います.
マイファイル
show.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test </title>
<link rel="stylesheet" type="text/css" href="demo.css" />
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="newscript.js"></script>
<link href="themes/2/js-image-slider.css" rel="stylesheet" type="text/css" />
<script src="themes/2/js-image-slider.js" type="text/javascript"></script>
<link href="generic.css" rel="stylesheet" type="text/css" />
</head>
<body>
<?php
include("samiloxide.php");
$sql=mysql_query(" select * from section ");
while($r=mysql_fetch_array($sql)){
echo "<li><a onclick='loadpage($r[id])' >$r[section]</a></li>" ;
}
?>
<div id="pageContent"></div>
</body>
</html>
newscript.js
var section;
function loadpage(section){
var section = section.toString();
$.ajax({
type: "POST",
url: "get.php",
dataType: "script",
data: ({section : section}),
success: function(html){
$("#pageContent").empty();
$("#pageContent").append(html);
}
});
}
get.php
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<style type="text/css">
<!--
#gallery-wrap{margin: 0 auto; overflow: hidden; width: 732px; position: relative;}
#gallery{position: relative; left: 0; top: 0;}
#gallery li{float: left; margin: 0 20px 15px 0;}
#gallery li a img{border: 4px solid #40331b; height: 175px; width: 160px;}
#gallery-controls{margin: 0 auto; width: 732px;}
#gallery-prev{float: left;}
#gallery-next{float: right;}
-->
</style>
<script type="text/javascript">
<!--
$(document).ready(function(){
// Gallery
if(jQuery("#gallery").length){
// Declare variables
var totalImages = jQuery("#gallery > li").length,
imageWidth = jQuery("#gallery > li:first").outerWidth(true),
totalWidth = imageWidth * totalImages,
visibleImages = Math.round(jQuery("#gallery-wrap").width() / imageWidth),
visibleWidth = visibleImages * imageWidth,
stopPosition = (visibleWidth - totalWidth);
jQuery("#gallery").width(totalWidth);
jQuery("#gallery-prev").click(function(){
if(jQuery("#gallery").position().left < 0 && !jQuery("#gallery").is(":animated")){
jQuery("#gallery").animate({left : "+=" + imageWidth + "px"});
}
return false;
});
jQuery("#gallery-next").click(function(){
if(jQuery("#gallery").position().left > stopPosition && !jQuery("#gallery").is(":animated")){
jQuery("#gallery").animate({left : "-=" + imageWidth + "px"});
}
return false;
});
}
});
-->
</script>
<?php
include("samiloxide.php");
//if(!$_POST['page']) die("0");
$section = (int)$_POST['section'];
$sql=mysql_query(" select * from images where section='$section'");
echo "
<div id='gallery-wrap'>
<ul id='gallery'>
";
while($rr=mysql_fetch_array($sql)){
echo " <li><a href='$rr[image]'><img src='$rr[image]' alt='' /></a></li>";
}
echo "
</ul>
</div>
<div id='gallery-controls'>
<a href='#' id='gallery-prev'><img src='images/prev.png' alt='' />next</a>
<a href='#' id='gallery-next'><img src='images/next.png' alt='' />last</a>
</div>
";
?>