DOM'um şöyle görünüyor:
<div id="d1">
<div class="c1">
<a href="#"><img src="img1_on.gif"></a>
<a href="#"><img src="img2_on.gif"></a>
</div>
</div>
Birisi bir resme tıkladığında, resim src'sinin <img src="imgx_off.gif">
olarak değişmesini istiyorum, burada x
1 veya 2 numaralı resmi temsil ediyor.
Bu mümkün mü yoksa görüntüleri değiştirmek için CSS mi kullanmam gerekiyor?
jQuery'nin attr() fonksiyonunu kullanabilirsiniz. Örneğin, img
etiketinizin id
niteliği 'my_image' ise, bunu yaparsınız:
<img id="my_image" src="first.jpg"/>
Daha sonra jQuery ile resminizin src
sini aşağıdaki gibi değiştirebilirsiniz:
$("#my_image").attr("src","second.jpg");
Bunu bir tıklama
olayına eklemek için şöyle yazabilirsiniz:
$('#my_image').on({
'click': function(){
$('#my_image').attr('src','second.jpg');
}
});
Görüntüyü döndürmek için şunu yapabilirsiniz:
$('img').on({
'click': function() {
var src = ($(this).attr('src') === 'img1_on.jpg')
? 'img2_on.jpg'
: 'img1_on.jpg';
$(this).attr('src', src);
}
});
Size resim src
sini nasıl değiştireceğinizi göstereceğim, böylece bir resme tıkladığınızda HTML'nizdeki (özellikle d1
kimliğiniz ve c1
sınıfınızdaki) tüm resimler arasında döner... HTML'nizde 2 veya daha fazla resim olsun.
Ayrıca belge hazır olduktan sonra sayfayı nasıl temizleyeceğinizi de göstereceğim, böylece başlangıçta yalnızca bir resim görüntülenecek.
Tam kod
$(function() {
var $images = $("#d1 > .c1 > a").clone();
var $length = $images.length;
var $imgShow = 0;
$("#d1 > .c1").html( $("#d1 > .c1 > a:first") );
$("#d1 > .c1 > a").click(function(event) {
$(this).children().attr("src",
$("img", $images).eq(++$imgShow % $length).attr("src") );
event.preventDefault();
});
});
Dökülme
Görüntüleri içeren bağlantıların bir kopyasını oluşturun (not: ek işlevsellik için bağlantıların href özelliğinden de yararlanabilirsiniz... örneğin [her görüntünün altında çalışan bağlantıyı görüntüleyin][1]):
var $images = $("#d1 > .c1 > a").clone(); ;
HTML'de kaç görüntü olduğunu kontrol edin ve hangi görüntünün gösterildiğini izlemek için bir değişken oluşturun:
var $length = $images.length;
var $imgShow = 0;
Belgenin HTML'sini sadece ilk resim gösterilecek şekilde değiştirin. Diğer tüm resimleri silin.
$("#d1 > .c1").html( $("#d1 > .c1 > a:first") );
Resim bağlantısına tıklandığında işlenecek bir işlev bağlayın.
$("#d1 > .c1 > a").click(function(event) {
$(this).children().attr("src", $("img", $images).eq(++$imgShow % $length).attr("src") );
event.preventDefault();
});
Yukarıdaki kodun kalbi, görüntüleri içeren jQuery nesnesi arasında geçiş yapmak için ++$imgShow % $length
kullanmaktır. ++$imgShow % $length
önce sayacımızı bir artırır, ardından bu sayıyı kaç resim varsa onunla değiştirir. Bu, $images
nesnesinin indeksleri olan 0
ile uzunluk-1
arasındaki indeks döngüsünü devam ettirecektir. Bu, bu kodun 2, 3, 5, 10 veya 100 resimle çalışacağı anlamına gelir... her resim arasında sırayla geçiş yapar ve son resme ulaşıldığında ilk resimden yeniden başlar.
Ayrıca, .attr()
resimlerin "src" niteliğini almak ve ayarlamak için kullanılır. $imagesnesnesi içinden öğeleri seçmek için
$(selector, context)formunu kullanarak
$imagesöğesini **[jQuery context][3]** olarak ayarlıyorum. Sonra sadece ilgilendiğim belirli indekse sahip öğeyi seçmek için **[
.eq()`]4** kullanıyorum.
Ayrıca src
leri bir dizi içinde de saklayabilirsiniz.
[3 resim içeren jsFiddle örneği][6]
Resimlerin etrafındaki bağlantı etiketlerinden hrefs'i nasıl ekleyeceğiniz de burada açıklanmıştır:
[jsFiddle örneği][7]
Bunu jQuery ile de bu şekilde yapabilirsiniz:
$(".c1 img").click(function(){
$(this).attr('src','/new/image/src.jpg');
});
Görüntü kaynağı için birden fazla durum varsa bir koşulunuz olabilir.