我是jQuery的新手，所以我可能做了一些非常错误的事情，但我做的下一个和降压链接按钮无法跳过$（'＃largeImage img'）。attr（'src'，picture_list [active_index ]）脚本我放入他们的.click函数。相反，结果是#largeImage div最终再次被隐藏。我已经尝试了从添加.preventDefault（）到脚本的所有内容，以确保链接（没有目标）不会尝试随机转到其他地方。我还输出了大部分变量，以确保它们实际上是在html代码中正确设置的。从我读过的关于.attr函数的所有内容来看，这个脚本应该正常工作。 PHP来源：
function gallery() //displays only the first l2 photos in the database. fix it when i figure a workaround for printing all of the thumbnails.
{
try
{
$album_id = $_GET['id'] ;
$db = honneyconnect( ) ;
if( mysqli_connect_error() )
{
throw new Exception( "Could not connect to the database") ;
}
$query = 'select * from albums where album_id="'.$album_id.'"' ;
$albums = $db->query( $query) ;
$album_name = $albums->fetch_row();
$default_pic = $album_name[1].'/'.$album_name[2] ;
$albums->free();
$query = 'select * from photos where album_id="'.$album_id.'"' ;
$photos = $db->query( $query ) ;
if( !$photos )
{
throw new Exception( "Query returned zero results." ) ;
}
else
{
$number_of_photos = $photos->num_rows ;
echo "<script type='text/javascript'> array_size = ".$number_of_photos." ;</script>" ; //figure out the size of the javascript array of photo sources
echo "<script type='text/javascript'> var picture_list = new Array( array_size ) ;</script>" ; //define the array
echo "<div id='largeImage'><a class='back' href=''><<</a><img src='".$default_pic."' ><a class='next' href=''>>></a></div>";
echo "<div id='gallery'>" ;
echo "<div id='thumbpanel'>" ;
if( $number_of_photos > 12 )
{
$stop = 12 ;
}
else
{
$stop = $number_of_photos ;
}
for( $i = 0; $i < 12 ; $i++ )
{
$row = $photos->fetch_row() ;
if( !$row )
{
$i = 12 ;
}
else
{
$file_path = $album_name[1]."/".$row[2] ; //provides the path for the image source
echo "<img value='".$i."' src='".$file_path."'>" ; //assigns the value for use in the jQuery scripts
echo "<script type='text/javascript'> picture_list[ ".$i." ] = '".$file_path."'</script>" ; //sends the values to the jQuery script
}
}
echo "</div></div>" ;
}
$photos->free();
$db->close();
}
catch( Exception $error )
{
echo $error ;
}
}
<html>
<head>
<style>
@import "honeysstyle.css";
</style>
<script type="text/javascript" src="jquery-1.10.2.min.js" ></script>
<script>
$(document).ready(function(){
var array_size = 0 ;
var active_index ;
$('#largeImage').hide() ;
$('#gallery img').click(function(){
$('#largeImage').attr('src',$(this).attr('src').replace('gallery','large'));
$('#largeImage').show() ;
active_index = parseInt( $(this).attr('value') ) ;
});
$('.next').click(function(){
active_index = active_index + 1 ;
if( active_index >= array_size )
{
$(this).hide() ;
}
if( active_index > 0 )
{
$('.back').show() ;
}
var source_image = $('#largeImage').attr('src') ;
$('#largeImage').attr('src').replace( source_image, picture_list[ active_index ] ) ;
});
$('.back').click(function(){
active_index = active_index - 1 ;
if( active_index <= 0 )
{
$(this).hide() ;
}
if( active_index < array_size )
{
$('.next').show() ;
}
var source_image = $('#largeImage').attr('src') ;
$('#largeImage').attr('src').replace( source_image, picture_list[ active_index ] ) ;
}) ;
$('.close').click(function{
$('#largeImage').hide() ;
}) ;
});
</script>
</head>
<body>
<?php
require( 'function.php' );
draw_masthead();
gallery();
?>
</body>
</html>
以下是html结果页面
<html>
<head>
<style>
@import "honeysstyle.css";
</style>
<script type="text/javascript" src="jquery-1.10.2.min.js" ></script>
<script>
$(document).ready(function(){
var array_size = 0 ;
var active_index ;
var source_image ;
$('#largeImage').hide() ;
$('#gallery img').click(function(){
$('#largeImage img').attr('src',$(this).attr('src').replace('gallery','large'));
$('#largeImage').show() ;
active_index = parseInt( $(this).attr('value') ) ;
});
$('.next a').click(function( event ){
event.preventDefault() ;
active_index = active_index + 1 ;
source_image = $('#largeImage img').attr('src') ;
$('#largeImage img').attr('src', picture_list[ active_index ] ) ;
});
$('.back a').click(function( event ){
event.preventDefault() ;
active_index = active_index - 1 ;
source_image = $('#largeImage img').attr('src') ;
$('#largeImage img').attr('src', picture_list[ active_index ] ) ;
}) ;
});
</script>
</head>
<body>
<div id="container">
<div class="photobanner">
<img class="first" src="honeys/Image1.jpg" alt="">
<img src="honeys/Image2.jpg" alt="">
<img src="honeys/Image3.jpg" alt="">
<img src="honeys/Image4.jpg" alt="">
<img src="honeys/Image5.jpg" alt="">
<img src="honeys/Image1.jpg" alt="">
<img src="honeys/Image2.jpg" alt="">
<img src="honeys/Image3.jpg" alt="">
<img src="honeys/Image4.jpg" alt="">
</div>
</div><div id="titlebar">HELL'S CANYON HONEYS ROLLER DERBY</div>
<div id="nav">
<ul>
<li>
<a href="index.php">Home</a>
</li>
<li>
<a href="news.php">News</a>
</li>
<li>
<a href="#">Events</a>
<ul class="eventnav">
<li><a href="community.php">Community</a></li>
<li><a href="bouts.php">Bouts</a></li>
</ul>
</li>
<li>
<a href="#">The Team</a>
<ul>
<li><a href="roster.php">Roster</a></li>
<li><a href="albums.php">Albums</a></li>
</ul>
</li>
<li>
<a href="sponsors.php">Sponsors</a>
</li>
<li>
<a href="social.php">Contact Us</a>
</li>
</ul>
</div>
<div id="controlpanel">
<ul>
<li>
<a href="rosteredit.php">Edit Roster</a>
</li>
<li>
<a href="albums.php">Edit Albums</a>
</li>
<li>
<a href="editevents.php">Edit Events</a>
</li>
<li>
<a href="editnews.php">Edit News</a>
</li>
<li>
<a href="editsponsors.php">Edit Sponsors</a>
</li>
<li>
<a href="editcontact.php">Edit Contact Info</a>
</li>
<li>
<a href="clearsession.php">Log Out</a>
</li>
</ul>
</div><script type='text/javascript'> array_size = 4 ;</script><script type='text/javascript'> var picture_list = new Array( array_size ) ;</script><div id='largeImage'><a class='back' href=''><<</a><img src='rosterpics/Image3.jpg' ><a class='next' href=''>>></a></div><div id='gallery'><div id='thumbpanel'><img value='0' src='rosterpics/image2.jpg'><script type='text/javascript'> picture_list[ 0 ] = 'rosterpics/image2.jpg'</script><img value='1' src='rosterpics/Image3.jpg'><script type='text/javascript'> picture_list[ 1 ] = 'rosterpics/Image3.jpg'</script><img value='2' src='rosterpics/Image4.jpg'><script type='text/javascript'> picture_list[ 2 ] = 'rosterpics/Image4.jpg'</script><img value='3' src='rosterpics/Image5.jpg'><script type='text/javascript'> picture_list[ 3 ] = 'rosterpics/Image5.jpg'</script></div></div><br>
<script type='text/javascript'>
document.write( picture_list[1] ) ;
document.write( picture_list[2] ) ;
document.write( picture_list[0] ) ;
</script>
</body>
</html>
只是想让下一个和后一个按钮按预期工作。谢谢你提前获得任何帮助。请不要犹豫，告诉我我的愚蠢错误，因为我知道我搞砸了某个地方，我只是不确定在哪里。
答案 0 :(得分：6)
你应该这样做：
var newSrc = $('#largeImage').attr('src').replace( source_image, picture_list[ active_index ] );
$('#largeImage').attr('src', newSrc);
您的代码只是replace一个新的字符串值，并返回它，它不会在实际的src属性中替换它。
答案 1 :(得分：2)
你能试试吗
$('#largeImage').attr('src', picture_list[ active_index ]);
而不是
$('#largeImage img').attr('src', picture_list[ active_index ]);
您的方法假定img标记位于ID为“largeImage”的元素内，如：
<div id="largeImage">
<img src="">
</div>
答案 2 :(得分：0)
如果您需要更改图片src属性，则需要使用$(selector).attr('src','new value')来电。没有第二个参数 - 它只返回值。
$('#largeImage').attr('src') 返回值，然后替换其中的内容。
没有对原始属性值进行任何更改。