logo标签列表

jQuery img src替换不起作用

javascriptphpjqueryhtmlcss
8

我对jQuery并不熟悉，所以可能做错了什么，但是我制作的下一个和上一个链接按钮无法触发$('#largeImage img').attr('src', picture_list[ active_index ] )脚本，而是导致#largeImage div再次被隐藏。我尝试过添加.preventDefault()到脚本中，以确保链接（没有目标）不会随机跳转其他地方。我还输出了大部分我的变量，以确保它们在html代码中被正确设置。从我读到的有关.attr函数的所有内容来看，这段脚本应该可以工作。

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>

我只是想使下一页和上一页的按钮按照预期工作。非常感谢任何帮助。请不要犹豫，在我的愚蠢错误上指出，因为我知道我在某个地方搞砸了，只是不确定在哪里。

3个回答
7
你应该这样做：
var newSrc = $('#largeImage').attr('src').replace( source_image, picture_list[ active_index ] );
$('#largeImage').attr('src', newSrc);

您的代码只是用一个新值替换字符串，然后返回它，它不会在实际的src属性中进行替换。

谢谢，这解决了问题的一部分。我发现主要问题是<a class='back' href=''>只是重新加载原始页面，导致div再次隐藏。非常感谢你们。 - NoobWebDev
4

你能尝试一下吗？

$('#largeImage').attr('src', picture_list[ active_index ]);

替代

$('#largeImage img').attr('src', picture_list[ active_index ]);

你的方法假设img标签位于一个ID为“largeImage”的元素内，例如：
<div id="largeImage">
   <img src="">
</div>
它实际上是嵌套在<div id='largeImage'>中的。我今天早上更改了这个，以获得不透明的背景。我会更新原始帖子以反映这一点。抱歉。 - NoobWebDev
这个评论是错误的，不应该被点赞。 - rafaelmorais
0
如果您需要更改图像的src属性，则需要使用$(selector).attr('src'，'new value')调用。没有第二个参数-它只返回值。

$('#largeImage').attr('src') 返回该值，然后您可以替换其中的内容。 原始属性值不会发生任何更改。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接