javascript - jQuery - Fading Different Elements In and Out On Button Click - Stack Overflow

admin管理员组

文章数量:1026989

I'm trying to create a few buttons that make a box appear depending on which button is clicked. I'm doing this by giving each box it's own class and passing an argument to a function to identify which box is meant to be targeted. I'm then assigning this function to each button's onclick attribute on the page (I know I should probably attach the event handler in a separate file). Here is the function:

var show = function(boxNumber){
    if($(this).hasClass('shown')){
       $(this).removeClass('shown');
       $(this).html('Show');
       $('.box'+boxNumber).fadeOut(1000);
      }
    else{
       $(this).html('Hide');
       $(this).addClass('shown');
       $('.box'+boxNumber).fadeIn(1000);
      }
 };

The html:

<span onclick="show(1)">Box 1</span>
<div class="box1"></div>

etc. for more boxes

This function doesn't work however. Firstly, the this keyword doesn't seem to be targeting the button because the html of the button doesn't change on click. However, when I replace the this keyword with the class of the button it works fine.

Secondly, the function fades the boxes in fine but then does not hide them if I click the button again.

I'm stuck so any help would be appreciated! Thanks.

I'm trying to create a few buttons that make a box appear depending on which button is clicked. I'm doing this by giving each box it's own class and passing an argument to a function to identify which box is meant to be targeted. I'm then assigning this function to each button's onclick attribute on the page (I know I should probably attach the event handler in a separate file). Here is the function:

var show = function(boxNumber){
    if($(this).hasClass('shown')){
       $(this).removeClass('shown');
       $(this).html('Show');
       $('.box'+boxNumber).fadeOut(1000);
      }
    else{
       $(this).html('Hide');
       $(this).addClass('shown');
       $('.box'+boxNumber).fadeIn(1000);
      }
 };

The html:

<span onclick="show(1)">Box 1</span>
<div class="box1"></div>

etc. for more boxes

This function doesn't work however. Firstly, the this keyword doesn't seem to be targeting the button because the html of the button doesn't change on click. However, when I replace the this keyword with the class of the button it works fine.

Secondly, the function fades the boxes in fine but then does not hide them if I click the button again.

I'm stuck so any help would be appreciated! Thanks.

• javascript
• jquery
• onclick
• fadeout

Share Improve this question Follow asked Mar 14, 2013 at 23:22 Matthew ShawMatthew Shaw 14511 gold badge55 silver badges1212 bronze badges 5

• Why are you using the onClick attribute. If you use jQuery, you could use the on event handler. Add an ID on your span, then $('my-id').on('click', function() { ... $(this).fadeOut(1000);}) – Bertrand Commented Mar 14, 2013 at 23:28
• I made a for loop to add a click event to each button but it led to more problems. I had to add a unique class to each button and then loop through them. The loop looked like: for(i=0;i<5;i++){$('.button'+i).click(function(){/*add fade in and fade out code from above but use 'i' to identify the box instead of an argument*/})}. I'm not sure why but the loop didn't work :( – Matthew Shaw Commented Mar 14, 2013 at 23:35
• Your span doesn't have a class of button# on it. That's probably why your loop didn't work. – Dave Zych Commented Mar 14, 2013 at 23:37
• I added the class when I was using the loop but removed it once I tried using onclick. – Matthew Shaw Commented Mar 14, 2013 at 23:43
• @user2022646: this in the context of onclick is not what you think it is. You'll need to pass it to the function to get the clicked <span/> as this. For example: <span onclick="show(1,this)"/>. I added this to my answer. – Aaron Blenkush Commented Mar 14, 2013 at 23:51

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Solution 1 (all jQuery):

The cleanest way to do this is to stick with jQuery for the click handling. You're already using jQuery for the fades, why not utilize it for binding the clicks? Try this:

jsFiddle

<span>Box 1</span>
<div class="box1"></div><br/>
<span>Box 2</span>
<div class="box2"></div><br/>
<span>Box 3</span>

$('span').click(function () {
    var boxNumber = $(this).index('span') + 1;
    if ($(this).hasClass('shown')) {
        $(this).removeClass('shown');
        $(this).html('Show');
        $('.box' + boxNumber).fadeIn(1000);
    } else {
        $(this).html('Hide');
        $(this).addClass('shown');
        $('.box' + boxNumber).fadeOut(1000);
    }
});

Note: If you want the faded out boxes to retain their place in the document, try using fadeTo() instead.

Solution 2 (mixed):

However, if you do need to use the onclick attribute to bind the click handler as you've shown in your example, you can do it like this:

jsFiddle

<span onclick="show(1,this)">Box 1</span>
<div class="box1"></div><br/>
<span onclick="show(2,this)">Box 2</span>
<div class="box2"></div><br/>
<span onclick="show(3,this)">Box 3</span>

function show(boxNumber, elem) {
    $this = $(elem);

    if ($this.hasClass('shown')) {
        $this.removeClass('shown');
        $this.html('Show');
        $('.box' + boxNumber).fadeIn(1000);
    } else {
        $this.html('Hide');
        $this.addClass('shown');
        $('.box' + boxNumber).fadeOut(1000);
    }
};

http://jsfiddle/fVENv/5/

The best way that I can see to do this is to add some hidden text with jquery on page load, and then toggle a class on click (as well as a fade toggle).

the html:

<p>Box 1</p>
<div></div><br/>
<p>Box 2</p>
<div></div><br/>
<p>Box 3</p>
<div></div><br/>

the jquery:

$('p').append('<span class="show">Show</span><span class="hide">Hide</span>');
$('div').hide();
$('p').click(function () {
    $('p').click(false);
    $(this).toggleClass('hidden').next('div').fadeToggle(function(){
    $('p').click(true);
    });
});

the css:

div {
    width:50px;
    height : 50px;
    background: red;
}
p {cursor:pointer;}
span { padding: 5px; margin-left:5px;}
p.hidden > .hide, p > .show  { display:inline }
p > .hide, p.hidden > .show { display: none; }

I'm trying to create a few buttons that make a box appear depending on which button is clicked. I'm doing this by giving each box it's own class and passing an argument to a function to identify which box is meant to be targeted. I'm then assigning this function to each button's onclick attribute on the page (I know I should probably attach the event handler in a separate file). Here is the function:

var show = function(boxNumber){
    if($(this).hasClass('shown')){
       $(this).removeClass('shown');
       $(this).html('Show');
       $('.box'+boxNumber).fadeOut(1000);
      }
    else{
       $(this).html('Hide');
       $(this).addClass('shown');
       $('.box'+boxNumber).fadeIn(1000);
      }
 };

The html:

<span onclick="show(1)">Box 1</span>
<div class="box1"></div>

etc. for more boxes

This function doesn't work however. Firstly, the this keyword doesn't seem to be targeting the button because the html of the button doesn't change on click. However, when I replace the this keyword with the class of the button it works fine.

Secondly, the function fades the boxes in fine but then does not hide them if I click the button again.

I'm stuck so any help would be appreciated! Thanks.

I'm trying to create a few buttons that make a box appear depending on which button is clicked. I'm doing this by giving each box it's own class and passing an argument to a function to identify which box is meant to be targeted. I'm then assigning this function to each button's onclick attribute on the page (I know I should probably attach the event handler in a separate file). Here is the function:

var show = function(boxNumber){
    if($(this).hasClass('shown')){
       $(this).removeClass('shown');
       $(this).html('Show');
       $('.box'+boxNumber).fadeOut(1000);
      }
    else{
       $(this).html('Hide');
       $(this).addClass('shown');
       $('.box'+boxNumber).fadeIn(1000);
      }
 };

The html:

<span onclick="show(1)">Box 1</span>
<div class="box1"></div>

etc. for more boxes

This function doesn't work however. Firstly, the this keyword doesn't seem to be targeting the button because the html of the button doesn't change on click. However, when I replace the this keyword with the class of the button it works fine.

Secondly, the function fades the boxes in fine but then does not hide them if I click the button again.

I'm stuck so any help would be appreciated! Thanks.

• javascript
• jquery
• onclick
• fadeout

Share Improve this question Follow asked Mar 14, 2013 at 23:22 Matthew ShawMatthew Shaw 14511 gold badge55 silver badges1212 bronze badges 5

• Why are you using the onClick attribute. If you use jQuery, you could use the on event handler. Add an ID on your span, then $('my-id').on('click', function() { ... $(this).fadeOut(1000);}) – Bertrand Commented Mar 14, 2013 at 23:28
• I made a for loop to add a click event to each button but it led to more problems. I had to add a unique class to each button and then loop through them. The loop looked like: for(i=0;i<5;i++){$('.button'+i).click(function(){/*add fade in and fade out code from above but use 'i' to identify the box instead of an argument*/})}. I'm not sure why but the loop didn't work :( – Matthew Shaw Commented Mar 14, 2013 at 23:35
• Your span doesn't have a class of button# on it. That's probably why your loop didn't work. – Dave Zych Commented Mar 14, 2013 at 23:37
• I added the class when I was using the loop but removed it once I tried using onclick. – Matthew Shaw Commented Mar 14, 2013 at 23:43
• @user2022646: this in the context of onclick is not what you think it is. You'll need to pass it to the function to get the clicked <span/> as this. For example: <span onclick="show(1,this)"/>. I added this to my answer. – Aaron Blenkush Commented Mar 14, 2013 at 23:51

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Solution 1 (all jQuery):

The cleanest way to do this is to stick with jQuery for the click handling. You're already using jQuery for the fades, why not utilize it for binding the clicks? Try this:

jsFiddle

<span>Box 1</span>
<div class="box1"></div><br/>
<span>Box 2</span>
<div class="box2"></div><br/>
<span>Box 3</span>

$('span').click(function () {
    var boxNumber = $(this).index('span') + 1;
    if ($(this).hasClass('shown')) {
        $(this).removeClass('shown');
        $(this).html('Show');
        $('.box' + boxNumber).fadeIn(1000);
    } else {
        $(this).html('Hide');
        $(this).addClass('shown');
        $('.box' + boxNumber).fadeOut(1000);
    }
});

Note: If you want the faded out boxes to retain their place in the document, try using fadeTo() instead.

Solution 2 (mixed):

However, if you do need to use the onclick attribute to bind the click handler as you've shown in your example, you can do it like this:

jsFiddle

<span onclick="show(1,this)">Box 1</span>
<div class="box1"></div><br/>
<span onclick="show(2,this)">Box 2</span>
<div class="box2"></div><br/>
<span onclick="show(3,this)">Box 3</span>

function show(boxNumber, elem) {
    $this = $(elem);

    if ($this.hasClass('shown')) {
        $this.removeClass('shown');
        $this.html('Show');
        $('.box' + boxNumber).fadeIn(1000);
    } else {
        $this.html('Hide');
        $this.addClass('shown');
        $('.box' + boxNumber).fadeOut(1000);
    }
};

http://jsfiddle/fVENv/5/

The best way that I can see to do this is to add some hidden text with jquery on page load, and then toggle a class on click (as well as a fade toggle).

the html:

<p>Box 1</p>
<div></div><br/>
<p>Box 2</p>
<div></div><br/>
<p>Box 3</p>
<div></div><br/>

the jquery:

$('p').append('<span class="show">Show</span><span class="hide">Hide</span>');
$('div').hide();
$('p').click(function () {
    $('p').click(false);
    $(this).toggleClass('hidden').next('div').fadeToggle(function(){
    $('p').click(true);
    });
});

the css:

div {
    width:50px;
    height : 50px;
    background: red;
}
p {cursor:pointer;}
span { padding: 5px; margin-left:5px;}
p.hidden > .hide, p > .show  { display:inline }
p > .hide, p.hidden > .show { display: none; }

本文标签： javascriptjQueryFading Different Elements In and Out On Button ClickStack Overflow