Css Ve Jquery İle İlgili Sorun
-
hacılar twitterda malumunuz twitin üzerine tıklayınca açılan bi div ve bu div'in içerisinde twite verilen menşınlar var. bende buna benzer bişey yapmak istedim küçük bi sorunla karşılaştım.
sorunlar:
1: tweetin olduğu yere toggle fonkisyonu ile diğeri divi açabiliyorum fakat 2 tweet olunca kullanıcı herhangi birine tıklasa bile hepsi açılıyor.
el ile id verip toggle kodunu düzenlediğimde sıkıntı kalmıyor fakat benim id'yi jquery de değişken olarak atamam gerek bunu nasıl yapmalıyım ? yani mesela id'si 1 olan tweete tıkladığında ona ait olan div açılsın istiyorum. bunu nasıl yapabilirim ?
2. sorun css ile alakalı. tweetler kapalıyken bitişik gözüksün ama tıklayınca alttan 10 px boşluk kalsın istiyorum. burada kafam durdu işte
ilgili kısmın html / css kodu:
dipnot: toggle fonksiyonunda açılıp kapanacak div cevapla divinin içindeki box divi
<div class="gonderimecontent" id="gönderi"> <div class="gonderiimg"><img src="images/avatar.png" class="mytooltip" width="52px" height="52px" alt="usarname" title="iyiydikbiz" data-toggle="tooltip"></div> <div class="clear"></div> <div class="usarname"> <a href="#">kalibre</a><span> @kalibre</span></div> <div class="clear"></div> <div class="gonderi"><p>Hello Word.</p></div> <script> $(document).ready(function(){ //Mouse hover olduğunda $(".gonderi").hover(function(){ $(".gonderiicon ul li a").css("color","#338DD0"); }, function (){ //Mouse hover olmadığında $(".gonderiicon ul li a").css("color","#ddd"); }); }); </script> <div class="gonderiicon"> <ul> <li><a href="#"><i class="fa fa-reply" class="mytooltip" title="cevapla" data-toggle="tooltip"></i></a></li> <li><a href="#"><i class="fa fa-exchange"class="mytooltip" title="yönlendir" data-toggle="tooltip"></i></i></a></li> <li><a href="#"><i class="fa fa-thumbs-up"class="mytooltip" title="beğen" data-toggle="tooltip"></i></i></a></li> <li><a href="#" data-toggle="modal" data-target="#modal-basic"><i class="fa fa-trash-o"class="mytooltip" title="Sil" data-toggle="tooltip"></i></i></a> </li> </ul> </div> <div class="clear"></div> <div class="cevapla"> <div id="box" style="display:none; margin-bottom: 15px; margin-top: 15px; background-color: #e2e2e2; width:auto; height: auto; border:1px solid #000000;"> deneme </div> </div> </div>
-
İkinciyi anlamadım.
Birincisi için de id'yi twt-1 twt-2 şeklinde yaptırtmalısın yani twt-{id} gibi birşeyler döngü haline sok tıklanıldığında bu id'ye sahip divi kapattır veya
atıyorum sistem şöyle:
<div>Twitim<a href="javascript:void(0)" class="kapat">x</a></div>
Çarpı işaretine a verilmiş ve herhangibir de onclick değeri yok. Üzerindeki divin de idsi falan yok.
İşte bu durumu çok seviyorum tabi uğraştırıyor ama olsun.
$('.kapat').click(function(){
// kapata tıklanıldığında yapılacak durum
});
jquery'de bu fonksiyon ile event handle yapabilirsin. Bir de $(this) selector ı var ki o da tadından yenmez hocam. ateşleyicinin bilgilerini alıyor.
Yani mesela $(this).remove() komutuyla o ateşleyiciyi silebiliriz ne olduğunu değerlerini bilmeden. (remove bidaha kullanılmamak üzere siler. bunun yerine toggle kullanırsın)
Bir de .parent fonksiyonuyla parent divi seçebiliriz. İlgili daha detay bilgi
Örnek jsfiddle uygulaması
-
<div data-id="ivirzivir" class="hangiislemyapilcaksaoclass">
bu şekilde id verebilirsin
$('.hangiislemyapilcaksaoclass').click(function addseries(e){
var iID = (e.currentTarget).attr('data-id');});
bu şekilde de tıkladıgın zaman data-id içerisini alabilirsin
Demek istedigini pek anlamadım,jsfiddlea bir örnek atarsan daha rahat anlayabiliriz
-
1. sorunda idsini vereceğin yer için
.attr( attributeName, value ) özelliğini kullanbilirsin.
.attr('id','twt1') gibi
2. sorunda twite tıkladığında
.css( propertyName, value ) özelliğini kullanabilirsin.
$('.twt').css('margin-bottom','10px') gibi
redsox tarafından 26/Ağu/14 09:36 tarihinde düzenlenmiştir -
cevapla divine id ekledim. jquery i bu şekilde yaptım ama yine olmadı. sorun nerde acaba ?
$(document).ready(function () {
$("#gonderimecontent").click(function(){
var element = $(".cevapla");
var I = element.attr("id");
$("#cevapla"+I).slideToggle(300);
$(this).toggleClass("active");
});
});