jQuery img src 替换不起作用
Posted
技术标签:
【中文标题】jQuery img src 替换不起作用【英文标题】：jQuery img src replace not working 【发布时间】：2014-03-17 03:14:45 【问题描述】：我对 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" >
<img src="honeys/Image2.jpg" >
<img src="honeys/Image3.jpg" >
<img src="honeys/Image4.jpg" >
<img src="honeys/Image5.jpg" >
<img src="honeys/Image1.jpg" >
<img src="honeys/Image2.jpg" >
<img src="honeys/Image3.jpg" >
<img src="honeys/Image4.jpg" >
</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>
只是想让下一步和后退按钮按预期工作。提前感谢您的任何帮助。请不要犹豫就我的愚蠢错误给我打电话，因为我知道我在某个地方搞砸了，我只是不确定在哪里。
【问题讨论】：
【参考方案1】：你应该这样做：
var newSrc = $('#largeImage').attr('src').replace( source_image, picture_list[ active_index ] );
$('#largeImage').attr('src', newSrc);
您的代码只是将 replace 字符串值替换为新值，然后返回它，它不会在您的实际 src 属性中替换它。
【讨论】：
感谢您解决了部分问题。我发现的主要问题是 只是重新加载了重新隐藏 div 的原始页面。非常感谢你们【参考方案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>
【讨论】：
它实际上嵌套在 我今天早上改变了它以获得不透明的背景。我将更新原始帖子以反映这一点。对不起。 这条评论是错误的，不应该被点赞。【参考方案3】：如果你需要改变图像src属性，你需要使用$(selector).attr('src','new value')调用。没有第二个参数 - 它只返回值。
$('#largeImage').attr('src') 返回值，然后替换其中的内容。
不会对原始属性值进行任何更改。
【讨论】：
以上是关于jQuery img src 替换不起作用的主要内容，如果未能解决你的问题，请参考以下文章
在 Jquery .html 替换新 div 上的整个 div 选择器后不起作用