點擊時在div內更改圖片

現在花了幾天的時間，需要一些指導。我有一個在div內的圖像切換。基本上當點擊div時，它內部的圖像應該改變爲不同的圖像。點擊時在div內更改圖片

這是一個jsfiddle的鏈接，所以你可以在頂部看到圖像，一旦整個切換區域被點擊，應該改變圖像。

而且這裏是代碼

HTML

<div class="toggle-wrap"> 
    <div class="trigger"> 
    <div class="one-third"><img src="http://placehold.it/200x200" /></div> 
    <div class="two-thirds column-last">This is where the heading goes <br /> 
     This is where the description goes<br /> 
     <a href="#">Toggle Open</a></div> 
    </div> 
    <div class="toggle-container"> 
    <div class="one-third">First column This is where the heading goes This is where the heading goes</div> 
    <div class="one-third">Second column This is where the heading goes This is where the heading goes</div> 
    <div class="one-third column-last">Third column This is where the heading goes This is  where the heading goes</div> 
    </div> 
</div>

CSS

.toggle-wrap { 
     float: left; 
    width: 100%; 
    margin-bottom: 5px; 
} 

.trigger {} 

.trigger a { 
    display: block; 
    padding: 10px; 
    padding-left: 15px; 
    text-decoration: none; 
    font-weight: bold; 
    color: #1D1D1B; 
    -webkit-transition-duration: 0s; 
    -moz-transition-duration: 0s; 
    -o-transition-duration: 0s; 
    background: url(tobeadded) no-repeat right 15px #F3F3F3; 
} 

.trigger.active a { 
    background: url(tobeadded) no-repeat right -20px #F3F3F3; 
} 

.toggle-container { 
    overflow: hidden; 
    float: left; 
    padding: 15px 15px 0 15px; 
} 

.one-third, .two-thirds { 
    display: inline; 
    float: left; 
    margin-right: 4%; 
} 

.one-third { 
    width: 30.66%; 
} 

.two-thirds { 
     width: 64%; 
}

JAVASCRIPT

$(".toggle-container").hide(); 
     $(".trigger").toggle(function(){ 
     $(this).addClass("active"); 
     }, function() { 
     $(this).removeClass("active"); 
    }); 
    $(".trigger").click(function(){ 
     $(this).next(".toggle-container").slideToggle(); 
    });

希望你們能幫助我。

謝謝。

來源

2013-07-12 Blue Orange

Demo here

試試這個：

$(".toggle-container").hide(); 
$(".trigger").toggle(function() { 
    $(this).addClass("active"); 
    $(".trigger").find('img').prop('src', 'http://jsfiddle.net/favicon.png'); 
}, function() { 
    $(this).removeClass("active"); 
    $(".trigger").find('img').prop('src', 'http://placehold.it/200x200'); 
}); 
$(".trigger").click(function() { 
    $(this).next(".toggle-container").slideToggle(); 
});

來源

2013-07-12 10:22:08 Sergio

此解決方案最適合我。謝謝。 –

@BlueOrange，很高興我能幫忙！ – Sergio

$(this).find("img").attr("src", "http://placehold.it/400x400");

將圖像從200x200更改爲400x400。您可以向它們兩個添加一個類（即class = small，class = big），jQuery可以使用它來識別當前正在顯示哪個類，並在它們之間切換。

來源

2013-07-12 10:18:27 Tro

分配一個ID，圖像標記像我一樣

<img id="test" src="http://placehold.it/200x200" />

，並使用下面的代碼：

$(".toggle-container").hide(); 
    $(".trigger").toggle(function(){ 
     $(this).addClass("active"); 
     $('#test').attr('src','http://placehold.it/200x200'); 
     }, function() { 
     $(this).removeClass("active"); 
      $('#test').attr('src','https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/s200x200/851558_201013993381868_2094147002_n.png'); 
    }); 
    $(".trigger").click(function(){ 
     $(this).next(".toggle-container").slideToggle(); 
    });

來源

2013-07-12 10:20:37 Aisha

將ID屬性添加到您的img，然後每次執行切換處理程序時更改src屬性。的IMG定義應該是這樣的：

<img id="myImage" src="http://placehold.it/200x200" />

和您的切換處理程序應該是這樣的：

$(".trigger").toggle(function(){ 
    $(this).addClass("active"); 
    $("#myImage").attr('src', 'http://placehold.it/some_other_image'); 
}, function() { 
    $(this).removeClass("active"); 
    $("#myImage").attr('src', 'http://placehold.it/200x200'); 
});

來源

2013-07-12 10:22:36

點擊時在div內更改圖片

回答

相關問題