How to convert element id in Javascript to jQuery?

Question

i dont know, how to chance this script to jQuery, please help JavaScript

function show_t(id){
    document.getElementById("hide_t_"+id).style.visibility='visible';
}
function hide_t(id){
    document.getElementById("hide_t_"+id).style.visibility='hidden';
}

this is div element on php, with above script

    <div class='item' onMouseOver="show_t('$dataBB[0]')" 
onMouseOut="hide_t('$dataBB[0]')">

I have trouble, when I change with this script

$("#show_t1"+id).mouseover(function(){
    document.getElementById("hide_t_"+id).style.visibility='visible';
}).mouseout(function(){
    document.getElementById("hide_t_"+id).style.visibility='hidden';
});

the div element for script on above is

<div id="show_t$dataBB[0]">
<span id='hide_t_$dataBB[0]' class='hide_input'>
</span>
</div>

You can see what I means in www.tumbasklik.com

Adil · Accepted Answer · 2013-01-01 06:21:26Z

4

Change

document.getElementById("hide_t_"+id).style.visibility='visible';

To

$("#hide_t_"+id).css('visibility','visible');

Your code would be.

$("#show_t1"+id).mouseover(function(){       
    $("#hide_t_"+id).css('visibility','visible');
}).mouseout(function(){       
    $("#hide_t_"+id).css('visibility','hidden');
});

Edit: You can change your selector to use wild cards instead of feeding id, and using class of span instead of generating the id.

Live Demo

$("[id^=show_t]").mouseover(function() {
    $(this).find('.hide_input').css('visibility', 'visible');
}).mouseout(function() {
    $(this).find('.hide_input').css('visibility', 'hidden');
});

edited Jan 1, 2013 at 6:21

answered Jan 1, 2013 at 5:48

Adil

148k25 gold badges217 silver badges207 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Arryangga Aliev Pratamaputra Over a year ago

how about the div element? <div id="show_t$dataBB[0]"> <span id='hide_t_$dataBB[0]' class='hide_input'> </span> </div>

Adil Over a year ago

You can use find() method of jQuery to select the elements with div like $("#hide_t_"+id).find('.hide_input') will give you span Read more about find here, api.jquery.com/find

David Thomas Over a year ago

@Arry: you'll have to give more than that if you want us to help you resolve the problem. How is it not working? Are there any errors in the JavaScript console? Is it just doing something differently than you want, or nothing at all?

arttronics Over a year ago

Unless I'm mistaken, it could just be that the solution here needs to be in a document ready function since the variables in the div are provided from the PHP script.

Fabrício Matté Over a year ago

@arttronics Now I understood what you meant with "populated by PHP". Past my sleep time already, sorry. Happy new year everyone btw.

|

Om Shankar · Accepted Answer · 2013-01-01 07:25:40Z

2

Step By Step

There is no need of onMouseOver and onMouseOut function in .item divs. Remove them. No need to pass values from php
Make your spans meaningful - instead of putting class hide_item to all spans, put class as buy-option hidden. Do all the styles to .buy-option { /* Styles */ } and put .hidden { display: none; }

Change jQuery code to this much only:

jQuery(function($) {
    $('div.item').mouseover(function() {
        $(this).find('.buy-option').removeClass('hidden');
    })
    $('div.item').mouseout(function() {
        $(this).find('.buy-option').addClass('hidden');
    });
});

Check Working fiddle and copy paste code from respective iframes (HTML, CSS, JS)
Start Learning jQuery starting from DOM traversal

answered Jan 1, 2013 at 7:25

Om Shankar

8,0694 gold badges38 silver badges54 bronze badges

2 Comments

Arryangga Aliev Pratamaputra Over a year ago

thanks so much :), can you send your file to my email [email protected]

Arryangga Aliev Pratamaputra Over a year ago

i have see in jsfiddle.net/OMS_/4CLAZ , its working . hahaha nice.... i love ya... thanks so much

Suresh Kamrushi · Accepted Answer · 2013-01-01 06:39:42Z

0

with Jquery -

$("#hide_t_"+id).hide();
$("#hide_t_"+id).show();

Try like this-

$("#show_t1"+id).mouseover(function(){
    $(this).show();
}).mouseout(function(){
    $(this).hide();
});

demo

edited Jan 1, 2013 at 6:39

answered Jan 1, 2013 at 5:50

Suresh Kamrushi

16.2k13 gold badges79 silver badges93 bronze badges

9 Comments

Arryangga Aliev Pratamaputra Over a year ago

i have using this suresh, but its not useful -_-

Suresh Kamrushi Over a year ago

@ArryanggaAlievPratamaputra: updated my post please try like this.

Arryangga Aliev Pratamaputra Over a year ago

if is using $(this).show(), its didnt referer to anything id right?

Suresh Kamrushi Over a year ago

@ArryanggaAlievPratamaputra: $(this) refer the same element. so i think it will work for you.

Arryangga Aliev Pratamaputra Over a year ago

did you mean like this "$(this) is refer to all element id one group, i means in the inside div element"

|

iandotkelly · Accepted Answer · 2014-06-10 03:18:00Z

0

$("#show_t1"+id).mouseover(function(){
    $("#hide_t_"+id).css('visibility','visible');
}).mouseout(function(){
    $("#hide_t_"+id).css('visibility','hidden');;
});

edited Jun 10, 2014 at 3:18

iandotkelly

9,1548 gold badges50 silver badges68 bronze badges

answered Jan 1, 2013 at 5:52

Nipun Jain

6014 silver badges6 bronze badges

1 Comment

Manish Nagar Over a year ago

who have problem with answer

Collectives™ on Stack Overflow

How to convert element id in Javascript to jQuery?

4 Answers 4

7 Comments

2 Comments

9 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

2 Comments

9 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related