Change only 1 element and not the selected one

Asked

Viewed 63 times

2

Good morning, I am developing a project where I made a small function where I will change all the items except what was selected, but this item still ends up being changed.

HTML:

<div class="col-xs-12" style="margin: 20px 0 0 0; padding: 0;">
    <div class="col-xs-6 col-sm-6" style="padding-left: 0;">
        <a class="btn cadastro btn-inscricao" href="Javascript:void(0);" <?= $total_intervalor ? '' : 'disabled';?> onclick="informeCnpj()">
            <div>
                <span>Inscrever o projeto de sua Entidade</span>
            </div>
            <div>
                <img src="images/arrow-right.png">
            </div>
        </a>
    </div>
    <div class="col-xs-6 col-sm-6" style="padding-right: 0;">
        <a class="btn cadastro btn-feedback" href="Javascript:void(0);" onclick="informeCnpj()">
            <div>
                <span>Enviar feedback após o evento</span>
            </div>
            <div>
                <img src="images/arrow-right-white.png">
            </div>
        </a>
    </div>
</div>

Script:

<script>
    function informeCnpj() {
        $('.informe-cnpj').slideDown(400);
        $(this).css('opacity', '1');
        $('.cadastro:not(this)').css('opacity', '0.5');
    }
</script>
javascript jquery
  • 1

    Dude is very confused your question, what do you really want to do?

  • @Leandrade has these 2 buttons, the Registration button, and the Feedback button. For example clicking on either of the two will call this function "informeCnpj" which shows a hidden div, and decreases the opacity of the opposite button. But when clicking for example on the Signup, only the feedback should be 0.5 opacity, but both (Signup and Feedback) are with this opacity.

  • 1

    Would not be $('.cadastro').not(this).css('opacity', '0.5'); ??

  • @fernandosavio Still it touches the opacity of both, instead of only 1.

  • 1

    But this code should be inside an event Handler, otherwise the this will not be the element you want

  • @fernandosavio as well?

  • 1

    Behold that example

Show 2 more comments

2 answers

1

You can change the opacity of all buttons and then reverse the clicked one... It would look like this: 

<script>
    $(".cadastro").click(function(){
        $('.informe-cnpj').slideDown(400);
        $('.cadastro').css('opacity', '0.5');
        $(this).css('opacity', '1');
    })
</script>

  • Still it moves in the opacity of both, instead of only 1.

1


Try to pass the this as parameter when calling the informeCnpj function.

For the this within the function refers to the function and not to the elemeninsira o código aquito.

function informeCnpj(elemento) {
  $('.informe-cnpj').slideDown(400);
  $(elemento).css('opacity', '1');
  $('.cadastro').not(elemento).css('opacity', '0.5');
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-xs-12" style="margin: 20px 0 0 0; padding: 0;">
  <div class="col-xs-6 col-sm-6" style="padding-left: 0;">
    <a class="btn cadastro btn-inscricao" href="Javascript:void(0);" onclick="informeCnpj(this)">
            <div>
                <span>Inscrever o projeto de sua Entidade</span>
            </div>
           
        </a>
  </div>
  <div class="col-xs-6 col-sm-6" style="padding-right: 0;">
    <a class="btn cadastro btn-feedback" href="Javascript:void(0);" onclick="informeCnpj(this)">
      <div>
        <span>Enviar feedback após o evento</span>
      </div>
   
    </a>
  </div>
</div>

Browser other questions tagged javascript jquery

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