Add and remove class

Asked

Viewed 9,448 times

1

I have a simple scheme to get to class .ativo and remove it and add the class .block then find the id #banner1 and adds the class .ativo and removes the class .block

Only it’s not working, look there :

$(".botao1").click(function() {
$('.ativo').removeClass('ativo').addClass('block').find($("#banner1")).addClass('ativo').removeClass('block');
});

Does anyone know why ?

Jsfiddle

javascript jquery
  • 2

    The element with the id banner1 is within element with the class ativo? If not, the find will not return any result.

  • 1

    Place the HTML as well

  • @mgibsonbr, how to locate id outside the class ?

  • I put an example in jsfiddle!!

  • If you relate botao1 with banner1, botao2 with banner2... because the use of find? Remove closest button2

  • @Papacharlie, but the result won’t be the same?

  • Your problem is not with changing class? You are making buttons to change the image and description, it is not?

  • @Papacharlie, this! This button1 is to return to the first image and description. the 2 to 2nd, etc...

Show 3 more comments

3 answers

2


I made a simpler example of what you want, is in jsfiddle, basically by clicking the button, you hide the descriptions and apply the visibility in the corresponding elements - description and image. See if the example below approaches what you want to do.

jQuery

$(document).ready(function()
{
    $("button").click(function() {
        // id do elemento clicado
        id = $(this).attr( 'id' );

        // exibe / oculta descrições
        $('.description').addClass('none');
        $('#description'+id).removeClass('none').addClass('block');

        // exibe / oculta imagens
        $('.image').addClass('none');
        $('#img'+id).removeClass('none').addClass('block');
    });
});

HTML

<div id="banners">
    <img id="img1" src="..." class="image block">
    <img id="img2" src="..." class="image none">
    <img id="img3" src="..." class="image none">

    <div id="description1" class="description">[1] Bla bla bla</div>
    <div id="description2" class="description none">[2] Bla bla bla</div>
    <div id="description3" class="description none">[3] Bla bla bla</div>

    <button id="1">Banner 1</button>
    <button id="2">Banner 2</button>
    <button id="3">Banner 3</button>
</div>

CSS

.block{display:block}
.none{display:none}

2

If you have as many buttons as images and the names have a pattern as in your jsFiddle, you can do so:

$('#botoes > div').each(function (i) {
    $(".botao" + i).click(function () {
        $('.ativo').removeClass('ativo').addClass('block');
        $("#banner" + i).addClass('ativo').removeClass('block');
    });
});

Thus each .botão(numero) will change the classes of each #banner(mesmo numero).

By the way, in your CSS you can simplify the buttons if they are the same. Instead of having a CSS for each class .botao1, .botao2, etc can use:

#botoes > div {
    width: 20px;
    float: left;
    height: 20px;
    margin-left: 10px;
    background-color: #333333;
    cursor: pointer;
}

1

You can further simplify and use the elements' own indexes, without having to define Ids to identify them:

HTML:

<div id="banners">
    <img src="http://png-5.findicons.com/files/icons/2718/pretty_office_icon_set_part_11/128/number_1.png">
    <img src="http://png-3.findicons.com/files/icons/2718/pretty_office_icon_set_part_11/128/number_2.png">
    <img src="http://png-4.findicons.com/files/icons/2718/pretty_office_icon_set_part_11/128/number_3.png">
    <div>[1] Bla bla bla</div>
    <div>[2] Bla bla bla</div>
    <div>[3] Bla bla bla</div>
    <hr>
    <button>Banner 1</button>
    <button>Banner 2</button>
    <button>Banner 3</button>
</div>

Jquery:

$(document).ready(function () {
    $('#banners img:not(:eq(0)), #banners div:not(:eq(0))').each(function() { $(this).hide(); });

    $("button").click(function () {
        $('#banners img, #banners div').hide();
        $('#banners img:eq(' + $(this).index('button') + '), #banners div:eq(' + $(this).index('button') + ')').show();
    });
});

See on Jsfiddle

PS.: To save labor I shamelessly stole the basic code of Pope Charlie... heheh

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.