how to show hidden i tag on mouse click

Question

I have an li as below

<li class="active">
        <a href="#" onclick="editCategory(this)" class="active" value="14-client" id=""> qqqq
        <i class="glyphicon glyphicon-trash pull-right" style="display:none"></i></a>
    </li>

It has an i tag which is hidden at beginning <i class="glyphicon glyphicon-trash pull-right" style="display:none"></i>

I want to show this i tag only when mouse is clicked on the anchor tag so I wrote onclick="editCategory(this)"

and this is my function

function editCategory(id)
    {
        alert('category');
        $(this).children().show();
    }

so when I click on the anchor tag then alert works alert('category') but the i tag is not shown.

Can anybody please point out the mistake I have done

@WereWolf-TheAlpha sorry I am poor in js/jquery.Is there any demerit of the way I am using? — SpringLearner, Jun 03 '14 at 04:30

Vedant Terkar · Answer 1 · 2014-06-03T05:11:33.597

Use:

function editCategory(id)
{
    alert('category');
    $(id).find('i').show("100");
}

`DEMO`

Also You're Missing $(document).ready(function(){...}); in your javascript if you're using JQuery be sure that it becomes ready as soon as your DOM becomes ready.

So I've changed your code as:

$(document).ready(function(){
 // Here $(this) will be `document` object
   $(".active").click(function(){ 
      //alert('category');
      $(this).find('i').show("100");  // Now this refers to object from which event is bubbled or generated.
    }); 
});

and your html will be:

<a href="#" class="active" value="14-client" id="qqq"> qqqq
        <i class="glyphicon glyphicon-trash pull-right" style="display:none">aaa</i></a>

`DEMO`

I mean this is era of JQuery Man. and you're still using inline-javascript. just get rid of it.

Also In this code:

function editCategory(id)
{
    alert('category');
    console.log($(this)); //or try alert instead of console.log, it Will Log/alert Window Object 
    console.log($(id)); // This will log <a> Object.
    $(id).find('i').show("100");
}

you're passing id as object this(anchor obj) to function, and $(this)(the object you're acessing) is now refering (in your case) to window object.

`DEMO`

Hope it helps.

Thanks again.well can you tell me why should not I use inline-javascript? — SpringLearner, Jun 03 '14 at 05:11
Sure. Have a look at: http://stackoverflow.com/questions/138884/when-should-i-use-inline-vs-external-javascript — Vedant Terkar, Jun 03 '14 at 05:14
This is my stackoverflow room http://chat.stackoverflow.com/rooms/44929/java-and-jquery-beginners — SpringLearner, Jun 03 '14 at 05:16

The Alpha · Answer 2 · 2014-06-03T04:46:24.997

1

Try something like this instead (Put this between <head><script>...</script></head>):

$(function(){
    $('a.active').on('click', function(e){
        e.preventDefault();
        $(this).find('i').show();
    });
});

Use this HTML:

<li class="active">
    <a href="#" class="active" value="14-client" id=""> qqqq
        <i class="glyphicon glyphicon-trash pull-right" style="display:none"></i>
    </a>
</li>

edited Jun 03 '14 at 04:46

answered Jun 03 '14 at 04:32

The Alpha

143,660
29
287
307

Thanks for answering,+1.I have some 15 li's and I want to show that i whose a is clicked.Then will your answer will be useful? – SpringLearner Jun 03 '14 at 04:35
Yes. it will still be useful – jhyap Jun 03 '14 at 04:37
Yes, you need to declare only one event handler for all same elements. – The Alpha Jun 03 '14 at 04:39
There is nothing inside the `i` tag, check the updated answer's link. – The Alpha Jun 03 '14 at 04:46

score 0 · Answer 3 · edited Jun 20 '20 at 09:12

0

It is an issue of parameter and not other thing : $(id) and not $(this)

function editCategory(id)
    {
        alert('category');
        $(id).children().show();
    }

$(id) and not $(this)

Because $(this).children().show(); means the this of function and not this of a Tag .

DEMO: http://jsfiddle.net/abdennour/bUtA3/

edited Jun 20 '20 at 09:12

Community

1
1

answered Jun 03 '14 at 04:24

Abdennour TOUMI

87,526
38
249
254

Can you please explain me why should not I use $this – SpringLearner Jun 03 '14 at 04:26
Because you pass id as argument : editCategory(id) , which refers to this of a element . – Abdennour TOUMI Jun 03 '14 at 04:27
1

I pass this as an argument and doesnt this refers to an object? – SpringLearner Jun 03 '14 at 04:28
I have some 15 li's.Now if I click on 1st li then i tag is shown.Now if I again click on the 2nd li then 1st as well as 2nd li is shown.Is it possible to remove all li except the current one – SpringLearner Jun 03 '14 at 04:33
All answers did not concentrate on main issue. Your issue is one and only one thing .ok ? – Abdennour TOUMI Jun 03 '14 at 04:40

Balachandran · Answer 4 · 2014-06-03T04:44:16.510

0

Demo try this

$("li.active a.active").click(function() {
        $(this).find("i").show();

});

edited Jun 03 '14 at 04:44

answered Jun 03 '14 at 04:37

Balachandran

9,567
1
16
26

Shaunak D · Accepted Answer · 2014-06-03T04:54:52.363

-1

Use this. <i> is the child of your <a> tag. Demo Fiddle

You are already passing this as a parameter to function editCategory(id) referenced by id.

function editCategory(id)
{
    alert('category');
    $(id).children('i').show();
}

Or

function editCategory(id)
{
    alert('category');
    $(id).find('i').show();
}

Other alternative,

$('i',id).show();

edited Jun 03 '14 at 04:54

answered Jun 03 '14 at 04:25

Shaunak D

20,588
10
46
79

So if it is an issue of passing parameters , why replace children() by find and children('i').. Don't repeat my answer please . The main issue is param – Abdennour TOUMI Jun 03 '14 at 04:31
I have some 15 li's.Now if I click on 1st li then i tag is shown.Now if I again click on the 2nd li then 1st as well as 2nd li is shown.Is it possible to remove all li except the current one – SpringLearner Jun 03 '14 at 04:33
There can be many children to the `` tag, So I used specific filter. And I did not repeat your answer. There are thousand there who use these selectors. – Shaunak D Jun 03 '14 at 04:33
@JqueryLearner, you wish to remove rest of the `
` or `` ?

Shaunak D

Jun 03 '14 at 04:35

Please Recheck, in my code only one `` is shown - which we click. You can check in console. – Shaunak D Jun 03 '14 at 04:38

Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/54958/discussion-between-shaunakde-and-jquerylearner). – Shaunak D Jun 03 '14 at 04:45

I have a doubt,can you help me? – SpringLearner Jun 05 '14 at 09:44

how to show hidden i tag on mouse click

5 Answers5

DEMO

DEMO

DEMO

It is an issue of parameter and not other thing : $(id) and not $(this)

`DEMO`

`DEMO`

`DEMO`