堆棧內存溢出
  簡體   English   中英

jQuery img src替換不起作用

[英]jQuery img src replace not working

 原文  2014-02-17 17:32:48  8   3    javascript/ php/ jquery/ html/ css

問題描述

我是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>

只是想讓下一個和后一個按鈕按預期工作。 謝謝你提前獲得任何幫助。 請不要猶豫，告訴我我的愚蠢錯誤，因為我知道我搞砸了某個地方，我只是不確定在哪里。

3 個解決方案

解決方案1
 6 已采納  2014-02-17 17:35:53

你應該這樣做： 

var newSrc = $('#largeImage').attr('src').replace( source_image, picture_list[ active_index ] );
$('#largeImage').attr('src', newSrc);

你的代碼只是replace的字符串replace字符串值，並返回它，它不會在你的實際src屬性中替換它。

解決方案2
 2  2014-02-17 17:35:19

你能試一下嗎 

$('#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
 0  2014-02-17 17:36:22

如果需要更改image src屬性，則需要使用$(selector).attr('src','new value')調用。 沒有第二個參數 - 它只返回值。

$('#largeImage').attr('src') 返回值，然后替換其中的內容。 未對原始屬性值進行任何更改。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 用js jquery替換img src img src變量在jQuery中不起作用 img的jQuery .attr（“ src”）不起作用 用 jQuery 動態替換 img src 屬性 jQuery 搜索並替換部分 img src jQuery替換此對象內的img src 縮略圖上的jQuery單擊以縮略圖src替換第二個img src jQuery img src與jQuery / jQueryUI庫替換沖突 替換滾動上的img src 如何用jquery替換不同窗口大小的img src？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM