javascript jQuery img src 替换不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21835623/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery img src replace not working
提问by NoobWebDev
I'm pretty new to jQuery so I'm probably doing something really wrong but the next and buck link buttons I made fail to trip the $('#largeImage img').attr('src', picture_list[ active_index ] ) script I placed into their .click functions. Instead the result is that the #largeImage div ends up being hidden again. I've tried everything from adding a .preventDefault() to the script to ensure that the links (which have no target) aren't trying to randomly go elsewhere. I've also output most my variables to ensure that they are in fact being set properly within the html code. From all that I've read about the .attr function this script should be working. PHP source:
我对 jQuery 很陌生，所以我可能做错了一些事情，但是我制作的 next 和 buck 链接按钮未能触发 $('#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>
The following is the html result page
以下是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>
Just looking to get the next and back buttons to work as intended. Thank you in advanced for any help. Please don't hesitate to call me on my stupid mistakes as I know I'm screwing up somewhere I'm just not sure where.
只是想让 next 和 back 按钮按预期工作。感谢您提供任何帮助。请不要犹豫，因为我的愚蠢错误而打电话给我，因为我知道我在某个地方搞砸了，我只是不确定在哪里。
采纳答案by Mehran Hatami
you should do it like:
你应该这样做：
var newSrc = $('#largeImage').attr('src').replace( source_image, picture_list[ active_index ] );
$('#largeImage').attr('src', newSrc);
your code just replacethe string value with a new one, and return it, it won't replace it in your actual srcattribute.
您的代码只是replace带有新的字符串值，然后返回它，它不会在您的实际src属性中替换它。
回答by Xaver
Can you try
你能试一下吗
$('#largeImage').attr('src', picture_list[ active_index ]);
instead of
代替
$('#largeImage img').attr('src', picture_list[ active_index ]);
Your method assumes the img tag is inside an element with an ID of "largeImage" like:
您的方法假设 img 标签位于 ID 为“largeImage”的元素内，例如：
<div id="largeImage">
<img src="">
</div>
回答by poncha
If you need to alter image srcattribute, you need to use $(selector).attr('src','new value')call. Without the second argument - it only returns the value.
如果您需要更改图像src属性，则需要使用$(selector).attr('src','new value')调用。没有第二个参数 - 它只返回值。
$('#largeImage').attr('src')returnsthe value, then you replace something in it.
No changes are being made to the original attribute value.
$('#largeImage').attr('src')返回值，然后替换其中的某些内容。不会对原始属性值进行任何更改。
