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 替换不起作用的主要内容,如果未能解决你的问题,请参考以下文章

为什么img src在论坛中不起作用?

合成全景图不起作用

react.js 替换 img src onerror

在 Jquery .html 替换新 div 上的整个 div 选择器后不起作用

jQuery on() stopPropagation 不起作用?

jQuery 类名不起作用