Button and span logic from CSS

Asked

Viewed 307 times

3

I have a button and a span from the following code:

<div id="onestepcheckout-place-order">
      <button type="button" class="button btn-proceed-checkout btn-checkout" title="<?php echo $this->__('Place Order Now'); ?>" id="onestepcheckout-place-order-button">
            <span><span class="onestepcheckout-place-order-title"><?php echo $this->__('Place Order'); ?></span></span>
            <span class="onestepcheckout-place-order-amount hide hidden" ><?php echo $this->getGrandTotal(); ?></span>
      </button>
</div>
<span id="process" style="display: none;">Aguarde, processando ...</span>

When the button class wins .onestepcheckout-place-order-button-disabled it is as follows:

<button type="button" class="button btn-proceed-checkout btn-checkout onestepcheckout-place-order-button-disabled" title="<?php echo $this->__('Place Order Now'); ?>" id="onestepcheckout-place-order-button">

I wanted to make sure that when the button gained this additional class, the span take display:block or in .show(). I’ve thought long and hard about a logic to accomplish this, but to no avail.

javascript jquery html html5 css3
  • 1

    When the button wins that class?

  • @Rafaelaugusto This class only serves to disable the click on the button and it wins when the credit card is verified.

  • 1

    Span is inside or outside the button?

  • @Guilhermenascimento Outside the button

  • Now you’ve changed your mind ? hehehe, blz so Sergio’s answer should solve.

  • @Guilhermenascimento Not exactly haha. I ended up missing what I typed, then I ended up doing it again.

Show 1 more comment

3 answers

5

You can do this with the adjacent element selector +. To do this only with CSS you have to use !important for the purpose of display: none; inline in the element being undone.

It would look like this: (Javascript is only for changing the class in the example)

var btn = document.querySelector('button');
btn.addEventListener('click', () =>
  btn.classList.toggle('onestepcheckout-place-order-button-disabled')
);
.onestepcheckout-place-order-button-disabled+span {
  display: block !important;
}
<button type="button" class="button btn-proceed-checkout btn-checkout" title="<?php echo $this->__('Place Order Now'); ?>" id="onestepcheckout-place-order-button">Clica-me</button>
<span id="process" style="display: none;">Aguarde, processando ...</span>

  • 1

    I was even commenting kkk, then I saw your comment, show!

1


You can check if the button has the referred class using .hasClass, after he received the class:

if($("#onestepcheckout-place-order-button").hasClass('onestepcheckout-place-order-button-disabled')){
  $("#process").show();
}


$("button.button").addClass('onestepcheckout-place-order-button-disabled');

if($("#onestepcheckout-place-order-button").hasClass('onestepcheckout-place-order-button-disabled')){
  $("#process").show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button  type="button" class="button btn-proceed-checkout btn-checkout" title="<?php echo $this->__('Place Order Now'); ?>" id="onestepcheckout-place-order-button">Clique</button>
<span id="process" style="display: none;">Aguarde, processando ...</span>

  • What would be missing would be an event so that the code could be executed, because the button does not win this class already on page loading.

  • But even putting this if in my code, it runs on page loading and not when the button wins that class.

  • The problem is that since it’s not my code, I haven’t been able to locate it yet, when it does this action of adding the class. It adds the class when the verification of the data entered by the user on your credit card is verified. And so far I haven’t found any kind of event to trigger this action either ...

  • With this test worked, but all that was left was to hide the button again.

  • No, the class the button wins causes it to acquire the attribute disabled. After the check has been done, the button loses this class and when it happened wanted to give a .hide() in the span.

  • Click on the button to add the class, then click again to remove: Check now: https://jsfiddle.net/80w9xj50/4/

  • It worked, but there’s one exception I noticed. The code only runs once. If any modification is made and the verification happens again and the class is added, the code is not executed a second time.

  • I placed everything inside a function that will be reinvocated: https://jsfiddle.net/80w9xj50/5/

  • Show! It worked out! Thank you so much for all the help and attention!

Show 4 more comments

0

If noticed the button already wins the class . onestepcheckout-place-order-button-disabled. So I think you just need to add the following CSS:

button.span{
    display:none;
}
button.onestepcheckout-place-order-button-disabled span {
    display:block !important;
}

Browser other questions tagged javascript jquery html html5 css3

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