Pie onmouseover <tr> elementam parādās ikonas

[senters]

JQUERY configs (nepareizs):

 

$('tr.TrHover').mouseover(function()
{
 $('#IconEdit').hide;
});

 

 

Tabulas tr elements:

 

<tr class="TrHover">
 <td>Nosaukums</td>
 <td><img id="IconEdit" src="Images/icon_edit_small.png" /></td>
 <td><img id="IconDelete" src="Images/icon_delete_small.png" /></td>
</tr>

 

Rezultātā vajag, lai uzbraucot uz tabulas <tr> parādītos Edit / Dzēst ikonas. Piemērs ir komentāri youtubē, kur braucot pāri parādās balsot par komentāru iespēja.

 

Piemērs

Edited September 1, 2010 by senters

[briedis]

$('tr.TrHover').hover(function(){
 $(this).find('#IconEdit,#IconDelete,').show();
},function(){
$(this).find('#IconEdit,#IconDelete,').hide();
});

 

Ņem vērā, ka ID ir jābūt unikālam, nevar būt vairāk elementi lapā ar vienu id.

Edited September 1, 2010 by briedis

[senters]

Te varētu būt problēma, jo man ir katrā <tr> šīs Edit / Delete ikonas, līdz ar to idi atkārtosies, kāds varētu būt risinājums?

 

 

 

Piekam, man ar šo:

 

		$('tr.TrHover').hover(function()
	{
		$(this).find('#IconEdit,#IconDelete').show();
	},
	function()
	{
		$(this).find('#IconEdit,#IconDelete').hide();
	});

 

joprojām nestrādā

Edited September 1, 2010 by senters

[rATRIJS]

Ir jaaizmanto klases (class) nevis id.

 

<img class="icon-edit" />

[senters]

nomainīju idus uz klasēm, bet tāpat tas brieža dotais skripts nestrādā

[rATRIJS]

Restiites jaanomaina ar punktinjiem:

 

$('#id');
$('.class');

 

P.S.

 

to var izdariit arii CSS'aa (ja nesatraucies par veciem IE)

 

.TrHover:hover img {
 display:block; /* vai inline */
}

Edited September 1, 2010 by rATRIJS

[senters]

Nu jā tik daudz jau zinu :), bet tikuntā saku, ka nestrādā šis risinājums:

 

$('tr.TrHover').hover(function()
{
 $(this).find('.IconHover').show();
},
function()
{
 $(this).find('.IconHover').hide();
});

 

<tr class="TrHover">
 <td>Record</td>
 <td><img class="IconHover" src="Images/icon_edit_small.png" /></td>
 <td><img class="IconHover" src="Images/icon_delete_small.png" /></td>
</tr>

Edited September 1, 2010 by senters

[briedis]

Ak pareizi, šāda eventu bindošana ir jāliek iekš $(document).ready(function(){ te kods });

[senters]

O, tūlīt tiks noprovēts, es arī tagad bakstos un skatos, ka citi konfigi man ir iekš (document) {}

[senters]

Šis arī atrisina problēmu un tagad ir tikai viena nianse palikusi.

 

Atverot lapu, rādas uzreiz ikonas, kā uzbraucu pazūd, un kā braukāju pāri tā rādas. Kā uzrakstīt, ka pašā sākumā arī ikonas ir hide?

 

Kods:

		$(document).ready(function() 
	{
		$(".TrHover").hover(function()
		{
			$(this).find(".IconHover").show();
		},
		function()
		{
			$(this).find(".IconHover").hide();
		});
	});

 

Tagad defaultā rāda ikonas, vajag lai nebūtu viņu.

 

Tomēr izdevās, šeit ir arī tam risinājums:

 

		$(document).ready(function() 
	{
		$(".IconHover").hide(),

		$(".TrHover").hover(function()
		{
			$(this).find(".IconHover").show();
		},

		function()
		{
			$(this).find(".IconHover").hide();
		});
	});

Edited September 1, 2010 by senters

[briedis]

slēp viņas ar CSS, nevis ar JS!

[senters]

Kāds tam ir pamatojums?

Edited September 1, 2010 by senters

[briedis]

Kāds tam ir pamatojums?

 

Tam nekādu pamatojumu nevajag. Stulbi ir izmantot JS, tur kur var iztikt ar CSS...

[senters]

Tātad pamatojums tomēr ir, neizmantot js, ja var css lietot. Bet nu tas tā :) paldies par palīdzību!