Use this in onclick event to set css style in specific element

Asked

Viewed 50 times

0

Next guys, I’m trying to set a css style in a specific element when I click a button, I’ve done something similar but now it’s setting for all the elements that have the class I used in the selector

inserir a descrição da imagem aqui

Buttons outside the number are buttons to increase or decrease.

When I click on them I need the update icon to appear equal to the circulated one, but only the product on which I clicked the button and not both.

                    <div class="cart-qty">

                       /*Botão de Aumentar Qtd*/

                        <div class="qty-ctl">
                            <button title="<?= $this->__('Decrease') ?>" type="button" data-role="change_cart_qty" class="decrease decrease-sidebar-cart" data-qty="-1"></button>
                        </div>

                        <input type="text" pattern="\d*(\.\d+)?" name="" id="qinput-<?php echo $_item->getId(); ?>" data-link="<?php echo $this->getAjaxUpdateUrl() ?>" data-item-id="<?php echo $_item->getId(); ?>" data-cart-item-id="<?php echo $_item->getSku(); ?>" class="qty cart-item-quantity input-text" name="" value="<?php echo $this->getQty() ?>" <?php if ($this->isOnCheckoutPage()) echo 'disabled'; ?> maxlength="12" />

                       /*Botão de Diminuir Qtd*/

                        <div class="qty-ctl">
                            <button title="<?= $this->__('Increase') ?>" type="button" data-role="change_cart_qty" data-qty="1" class="increase increase-sidebar-cart" ></button>
                        </div>

                         /*Botão de atualizar*/

                        <button id="qbutton-<?php echo $_item->getId(); ?>" data-item-id="<?php echo $_item->getId(); ?>" data-update data-cart-item-update class="button quantity-button update-cart-item" style="opacity: 0">
                            <?php echo $this->__('ok'); ?>
                        </button>
                    </div>
                </div>

                /*Função para fazer aparece o botão*/

                <script>

                    $j('document').ready(function(e) {
                        $j( ".increase-sidebar-cart, .decrease-sidebar-cart").click(function() {
                            $j(e).(".update-cart-item").css("opacity", "1");
                        });
                    });
                </script>
javascript html jquery

  • Friend, instead of using jquery to change the opacity property, try using pure JS by taking the button ID like this document.getElementById("qbutton-<?php echo $_item->getId(); ?>").style.opacity = "1";

  • Thanks Murilo, helped a lot, I used the pure js as indicated because the qbutton-<?php echo $_item->getId(); ?> i passed by parameter through an onclick that I put on the buttons and recovered in function, thank you very much!

  • I’m glad it worked out! In order to get everything organized, I’m going to pass on my comment to you in response and then delete it, so if you can put your comment on it, stating what was done, and mark it as correct, then it helps other people who are looking for the same question as you, what you think?

1 answer

1


Friend, instead of using jquery to change the opacity property, try using pure JS by taking the button ID like this: 

document.getElementById("qbutton-<?php echo $_item->getId(); ?>").style.opacity = "1";

Browser other questions tagged javascript html jquery

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