Button and span logic from CSS

Question

Button and span logic from CSS

Navigation

#1 by (4 votes)
#2 by (1 votes)
#3 by (0 votes)

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 button gets the class .onestepcheckout-place-order-button-disabled it looks like this:

<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 button gained this additional class, span would have display:block or .show() . I thought a lot about logic to accomplish this, but to no avail.

javascript html jquery html5 css3

asked by anonymous 07.11.2017 / 20:42

3 answers

4

You can do this with the adjacent element selector + . To do this only with CSS you have to use !important for the effect of display: none; inline on the element to be aborted.

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>

07.11.2017 / 20:48

0

If I 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;
}

07.11.2017 / 21:48

How to solve this error correctly? Sorting lists with multiple parameters using lambda expression

score 1 · Accepted Answer

You can check if the button has this class using .hasClass , after it receives 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><buttontype="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>