Items do not change classes, attributes, or styles

Question

Items do not change classes, attributes, or styles

Navigation

#1 by (0 votes)

0

I'm doing tests on javascript , so that, with clicar in given botão , one item adds up, another botão another item adds, and so on but none of botões works

* All of them follow the pattern below, changing only names of id's

    $('#btn-1').click(function(){
        if($('#imagem-chamada').css('display') != 'none'){
            $('#imagem-chamada').addClass('hide');
            $('#new-img').addClass('show');
        }else{
            $('#imagem-chamada').addClass('show');
            $('#new-img').addClass('hide');
        }
    });

* I tried to use .show() and .hide() * I also tried to use .css('display', 'inline-block/none')

    <div id="new-img">
        <div class="file" id="image-holder"></div>
        <label for="fileUpload">Alterar Imagem</label>
    </div>
    <div id="imagem-chamada" >
        <img class="file" id="src-img">
        <label id="btn-1" for="fileUpload">Alterar Imagem</label>
    </div>

javascript jquery

asked by anonymous 22.12.2016 / 23:23

1 answer

No file appears in the cropping bar How to edit an image stored as a BLOB

score 0 · Accepted Answer

You are trying to get a display that you have not declared in the div with the image-call id

add according to your requirement a style="display:none" or style="display:block"

I made an example that I believe is what you want. Particularly I would change your if by: $('#imagem-chamada').is(':visible') because I find it more intuitive.

and would change the .addClass('hide'); by .hide(); and% by% by% by% So you would not have to create the classes in css .addClass('show'); and nor .show();

Finally, follow an example and see if it meets your need:

    $('#btn-1').click(function(){
        if(!$('#imagem-chamada').is(':visible')){
          $('#imagem-chamada').show();
          $('#new-img').hide();
        }else {
         $('#imagem-chamada').hide(); 
          $('#new-img').show();
        }
    });

    $('#btn-2').click(function(){
        if(!$('#new-img').is(':visible')){
          $('#new-img').show();
          $('#imagem-chamada').hide();
        }else {
         $('#new-img').hide(); 
          $('#imagem-chamada').show();
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="new-img">
        <div class="file" id="image-holder"></div>
        <label id="btn-2" for="fileUpload">Alterar Imagem btn-1</label>
    </div>
    <div id="imagem-chamada" style="display:none">
        <img class="file" id="src-img">
        <label id="btn-1" for="fileUpload1">Alterar Imagem btn-2</label>
    </div>