0
Kayıt Ol

Butona tıkladığında...

7

●

450

  • 08-07-2010, 10:23:26
    #1
    burakbudak
    burakbudak
    Merhaba arkadaşlar şöyle bir sorunum var:



    resimde gördüğünüz gibi, altta sağ ve sol adında iki butonum var. Bu butona tıkladığımda yukarıdaki kutucklara sırasıyla L veya R harflerini yazdırmak istiyorum.

    Mesela Kullanıcı Left butonuna bastığında ilk kutucuğa L yazılsın, ama Right butonuna basıldığında R yazılsın..

    <script type="text/javascript">
$(document).ready(function() {
$("#sollink").click(function() {
$("#solimage").attr({src : "/right.png"});
});
$("#saglink").click(function() {
$("#sagimage").attr({src : "/left.png"});
});
});
</script>
<td>
     <img id="solimage" src="/sright.png" />
     <img id="sagimage" src="/sleft.png" />
</td>
<td>
     <img id="solimage" src="/sright.png" />
     <img id="sagimage"  src="/sleft.png" />
</td>
<td>
       <img id="solimage" src="/sright.png" />
       <img id="sagimage" src="/sleft.png" />
</td>
<td>
	<img id="solimage" src="/sright.png" />
	<img id="sagimage" src="/sleft.png" />
</td>
<td>
	<img id="solimage" src="/sright.png" />
	<img id="sagimage" src="/sleft.png" />
</td>
    böyle yaptım ama tabiki doğal olarak sadece ilk 2 kutucuk değişiyor..

    Bunların yukarıda belirttiğim gibi çalışmasını nasıl sağlarım acaba?
  • 08-07-2010, 13:39:34
    #2
    mystec
    mystec
    element id leri benzersiz olmalı diyerek başlayayım. Yani 3 5 tane solimage vermen hatalı. Sorununun çözümüne gelince
    <script type="text/javascript">
var num = 0;
$(document).ready(function() {
	$(".budur").click(function() {
		degistir($(this).attr('id'));
	});
});
function degistir(nsrc){
		if(num>7) num = 0;
		$('table.imajlar img')[num].src = 's'+nsrc+'.png';
		num = num+1;
}
</script>
    <table cellpadding="0" cellspacing="0" class="imajlar">
    <tr>
    <td>
    <img src="bos.png" />
    <img src="bos.png" />
    </td>
    <td>
    <img src="bos.png" />
    <img src="bos.png" />
    </td>
    <td>
    <img src="bos.png" />
    <img src="bos.png" />
    </td>
    <td>
    <img src="bos.png" />
    <img src="bos.png" />
    </td>
    <td>
    <img src="bos.png" />
    <img src="bos.png" />
    </td>
    </tr>
    </table>
    <img src="left.png" id="left" class="budur" /><img id="right" src="right.png" class="budur" />
  • 08-07-2010, 13:40:09
    #3
    justices
    justices
    $("#sagimage").eq(0) dersen ilk olanı seçer
    $("#sagimage").eq(1) ikinciyi
    $("#sagimage").eq(2) üçüncüyü şeklinde gider.

    buna uygun bir fonksiyon tanımlayarak sırasıyla işem yaptırabilirsin, istediğin sıradakini seçtirebilirsin 1. basit ama uzun yöntem.

    ikinci yöntem de "each" kullanarak içerisine de eq 0 dan başlatarak "attr src" taraması yaparsın, sright ise image, ilk sright olanı right e çevirip each döngüsünü durdurursun. bu biraz daha karışık ama kısa yöntem olabilir.
  • 08-07-2010, 13:51:36
    #4
    burakbudak
    burakbudak
    mystec adlı üyeden alıntı: mesajı görüntüle
    element id leri benzersiz olmalı diyerek başlayayım. Yani 3 5 tane solimage vermen hatalı. Sorununun çözümüne gelince
    <script type="text/javascript">
var num = 0;
$(document).ready(function() {
	$(".budur").click(function() {
		degistir($(this).attr('id'));
	});
});
function degistir(nsrc){
		if(num>7) num = 0;
		$('table.imajlar img')[num].src = 's'+nsrc+'.png';
		num = num+1;
}
</script>
    <table cellpadding="0" cellspacing="0" class="imajlar">
    <tr>
    <td>
    <img src="bos.png" />
    <img src="bos.png" />
    </td>
    <td>
    <img src="bos.png" />
    <img src="bos.png" />
    </td>
    <td>
    <img src="bos.png" />
    <img src="bos.png" />
    </td>
    <td>
    <img src="bos.png" />
    <img src="bos.png" />
    </td>
    <td>
    <img src="bos.png" />
    <img src="bos.png" />
    </td>
    </tr>
    </table>
    <img src="left.png" id="left" class="budur" /><img id="right" src="right.png" class="budur" />
    çok çok teşekkürler, fakat buradaki nsrc değişkeni veriyi nereden alıyor?
    çünkü şuan o değişken boş görünüyor.

    justices adlı üyeden alıntı: mesajı görüntüle
    $("#sagimage").eq(0) dersen ilk olanı seçer
    $("#sagimage").eq(1) ikinciyi
    $("#sagimage").eq(2) üçüncüyü şeklinde gider.

    buna uygun bir fonksiyon tanımlayarak sırasıyla işem yaptırabilirsin, istediğin sıradakini seçtirebilirsin 1. basit ama uzun yöntem.

    ikinci yöntem de "each" kullanarak içerisine de eq 0 dan başlatarak "attr src" taraması yaparsın, sright ise image, ilk sright olanı right e çevirip each döngüsünü durdurursun. bu biraz daha karışık ama kısa yöntem olabilir.
    Teşekkür ederim, fakat js pek hatta hiç anlamadığım için biraz karışık geldi, ama inceliyeceğim bu söylediklerinizin hepsini.
  • 08-07-2010, 13:56:32
    #5
    burakbudak
    burakbudak
    upps pardon, tamamdır butonlardaki id den alıyormuş. şimdi gördüm. çok teşekkürler tekrar.
  • 08-07-2010, 13:57:19
    #6
    mystec
    mystec
    nsrc yi degistir($(this).attr('id')); buradan alıyor. yani tıkladığın butonun idsi. tıkladığın butonun id si right ise klasöründen sright.png yi imajın srcsi yapıyor. left ise yine aynı şekilde sleft.png yi yapıyor. Ama ben yanlış görmüşüm sen ilk etapta sright yapmışsın o yüzden $('table.imajlar img')[num].src = 's'+nsrc+'.png';
    satrını $('table.imajlar img')[num].src = nsrc+'.png'; olarak değiştir
  • 08-07-2010, 14:00:53
    #7
    mystec
    mystec
    imajlarını karıştırdım, istersen tüm tabloyu ver fonksiyonu ona göre düzenleyeyim.
  • 08-07-2010, 14:24:49
    #8
    burakbudak
    burakbudak
    mystec adlı üyeden alıntı: mesajı görüntüle
    imajlarını karıştırdım, istersen tüm tabloyu ver fonksiyonu ona göre düzenleyeyim.
    Yok tamamdir, cok tesekkür ederim. Çok güzel oldu.