Bunni Gek Bunni Gek - 4 years ago 124
HTML Question

Toggle class upon change of data attribute

I'm working on a shopping cart and my client wants it to have one background when it's empty and another one when it has items. So here's what I got as a mark up:

<a href="#" id="shopping-cart" data-count="0" class="trigger cart">

The changes on the data-count are being handled on server side and updated via php my problem is that I have no idea how to make jquery read the data-count and make the if statement so it reads

if data-count= 0 then add .empty
else data-count > 0 then add .full

Also, I'm not sure if I should use
from empty to full, I'm sorry, so far all my attempts to write jquery have failed and the handler for all that is on vacation so I would appreciate all the help.

A decision was made to change the plugin being used and now I tried to replicate this on the new one and cant seem to wrap my head around it to achieve it the new code available looks something like this:

<?php global $woocommerce; ?>

<a class="cart-contents" href="<?php echo $woocommerce->cart->get_cart_url(); ?>"
title="<?php _e('View your shopping cart', 'woothemes'); ?>">
<?php echo sprintf(_n('%d item', '%d items', $woocommerce->cart->cart_contents_count, 'woothemes'), $woocommerce->cart->cart_contents_count);?> - <?php echo $woocommerce->cart->get_cart_total(); ?></a>

Answer Source

why don't you do this ? :

$cart = sprintf(_n('%d', cart::$cart_contents_count, 'mini-cart'), cart::$cart_contents_count);

if($cart >= '1')
<a href="#" id="shopping-cart" data-count="$cart" class="trigger cart">
</a> <?php
{ ?>
<a href="#" id="shopping-cart" data-count="0" class="trigger cart">

this way you do not need to use jQuery to hide elements that are not needed.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download