Items do not exchange classes, attributes or styles

Asked

Viewed 52 times

0

I’m doing some tests in javascript, so that, at the clicar in a given botão, one item summed, in another botão another item sum up, and so on, but none of the botões works

*They all 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 the .show() and .hide() *I also tried to use the .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
  • 6

    Can you make a jsFiddle? or create a complete example here that you can test? Not knowing the HTML and CSS of these classes is hard to know what is failing...

  • discovered the error, it was not in my code, the guy who works cmg using git linked a dps file of mine that used the same Divs, giving a display inline-block nelas

1 answer

0


You are trying to grab a display that you did not declare in the div with the image-called id

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

I made an example that I believe is what you’re looking for. Particularly I would trade your if for: $('#imagem-chamada').is(':visible') because I find it more intuitive.

and exchange the .addClass('hide'); for .hide(); and the .addClass('show'); for .show(); So you wouldn’t need to create the classes in css .hide{display:none;} and neither .show{display:block;}

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>
<div id="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>

  • all Divs start with inline-block display, by css, so I didn’t declare any display:None by html

  • outside that I had also tried the hide() and show()

  • -1 vote for answering exactly what I said I had done, but I give as answered, because my code at the beginning was like this and works

  • 1

    So next time you put in a complete code, because I’m no guesser. You post an incomplete code and wait for a complete answer ? kind of hard to help you so.

  • ta written in the question itself, there the problem already n is mine when you n read everything :)

  • 1

    I read your question at least three times, because it was difficult to understand your doubt and your incomplete code. Next time, put your question correctly along with your full code. I showed you a working code, if you tried and did not get the problem was yours and not mine.

  • @Withering gambôa in time to negativar the answer you can put an answer of your own. So you explain the problem better in case someone has the same problem and you don’t get the feeling that someone "stole" your answer.

  • I was negative because he answered exactly what I had already done, but I gave the answer because it works, and as explained, the error was in a css that was put by someone else

  • @Murilogambôa I noticed. But to avoid giving -1 you could have given your own answer. When you give -1 you signal that "the answer doesn’t help" or "has mistakes".

  • but it doesn’t help, because it was already made like this

  • 1

    If it had already been done this way, then why did you ask for help on how to make it work ? You asked a question simply by doing ? Surely you couldn’t make it work too, I showed you a way that works. Don’t you want solutions that work ? simple, does not create questions.

Show 6 more comments

Browser other questions tagged javascript jquery

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