javascript multiple time on same page

Question

I need help with a "Show and hide div on link click using jQuery" being used multiple times on the same page. Using this guide https://coding-tips.com/javascript/show-hide-div/ I have added a Show and hide div link to a page that when clicked adds a WHMCS product to the cart using a hidden iframe and the add to cart URL for the product provided by WHMCS. When clicked the link is hidden and a new link with green text and a tick is displayed so the user knows it has been added to the cart.

I have tried changing the class for the second link but nothing I try allows the two links to work separately from each other. I though if each link had it's own class they would work independently of each other but this does not seem to be the case in my tests.

I want to duplicate the link and add it to the same page for each product.

HIDDEN IFRAME:

<iframe style="display:none;" name="target"></iframe>

LINK:

<a href="https://example.org/cart.php?a=add&pid=144" target="target" class="showClick show">ADD TO CART</a> 
<a href="#" class="hideClick hidden">✔ ADD TO CART</a>

JAVASCRIPT:

$(function() {
  $('.showClick').click(function() {
    $('.hidden').show();
    $('.show').hide();
  });
  $('.hideClick').click(function() {
    $('.hidden').hide();
    $('.show').show();
  });
});

CSS:

/* Hide Added To Cart Link */
.hidden {
display:none;
}

/* Make Link Look Like Button */

.showClick.show {
    padding: 15px 30px;
    border: 1px solid #fff;
    border-radius: 2px;
    letter-spacing: 2px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255,255,255,0.61);
    cursor: pointer;
}

.showClick.show:hover {
    background-color: #9b9b9b;
    border: 1px solid #9b9b9b;
}

.hideClick.hidden {
    padding: 15px 30px;
    border: 1px solid #fff;
    border-radius: 2px;
    letter-spacing: 2px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255,255,255,0.61);
    cursor: pointer;
    background-color: green;
}

.hideClick.hidden:hover {
    background-color: #9b9b9b;
    border: 1px solid #9b9b9b;
}

It works great but I can not get a second link to work for a different product. If you click the first link it changes the hide/show state of the second products link and visa versa. My goal is to have lots of product links on the page that when clicked add different products to the WHMCS cart without the user having to leave the page. Each product link clicked will be green with a tick so the user knows what they have added to the cart.

EDIT

Using your help I was able to create the below method to change the text on the link after it was clicked. This worked independently for each link on the page using onclick="func(this)"

This is my code:

<iframe style="display:none;" name="target"></iframe>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
<script type="text/javascript">
function func(e) {
  $(e).text('ADDED TO CART');
}
</script>
<a onclick="func(this)" href="https://example.org/cart.php?a=add&pid=144" target="target" class="product-button">ADD TO CART</a>

So here's the issue with how you're currently doing it -- EVERY .hidden on the page will be toggled. You aren't setting a limit to the currently clicked element and it's sibling. Are the links in any sort of parent container? — Snowmonkey
– Snowmonkey, Commented Jan 23, 2019 at 23:31
you can also use the context you're in to assign the proper classes to your elements similar to this questions (stackoverflow.com/questions/7519815/…). to simplify I would move the checkmark into a span in the same anchor tag as the one you originally show and then assign the proper classes from there — nraduka
– nraduka, Commented Jan 24, 2019 at 0:16
@Snowmonkey Thank you for your help. They are not in a parent container but they can be. If I put the link code in a div with an ID will I be able to use it within the javascript to run the correct javascript for each button?. <div id="but1">LINK CODE</div> — Stuart Hingston
– Stuart Hingston, Commented Jan 24, 2019 at 8:09
@nraduka using the link you provided I was able to get it working using a simpler method using JavaScript 'this'. I have added my revised code in my post above. It works but it would be good if I could add two features to it. 1. Change the link class on click so the link style can be changed when it has been clicked. 2. Change the link href on click so when clicked it can remove the product from the cart. Thanks. — Stuart Hingston
– Stuart Hingston, Commented Jan 24, 2019 at 11:36

Stuart Hingston · Accepted Answer · 2020-07-09 18:57:02Z

1

Using your help I was able to create the below method to change the text on the link after it was clicked. This worked independently for each link on the page using onclick="func(this)"

This is my code:

<iframe style="display:none;" name="target"></iframe>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
<script type="text/javascript">
function func(e) {
  $(e).text('ADDED TO CART');
}
</script>
<a onclick="func(this)" href="https://example.org/cart.php?a=add&pid=144" target="target" class="product-button">ADD TO CART</a>

answered Jul 9, 2020 at 18:57

Stuart Hingston

536 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ahmet Gokdayi · Accepted Answer · 2019-01-24 00:03:59Z

0

Links should have the same css classes then, but you need to use different ids for each link and access to their id's when clicked like this, inside your .on('click') function;

     let id = $(this).attr('id');

Duplication must be done programmatically and when doing that assign different ids & different href attributes e.g;

     let products = [
        {
            id: 2,
            link: 'pid=144'
        },
        {
            id: 3,
            link: 'pid=154'
        }
    ];

    for (let i = 0; i < products.length; i++) {
        const element = products[i];
        let strElement = '<a id=' + (i + 1) + '  href="https://example.org/cart.php?a=add&' + element.link+'" target="target" class="showClick show"> Click to Add to Cart </a>';
        // Appending to body element here but if you have a container div, use it's id with a # prefix
        $('body').append(strElement);
    }

answered Jan 24, 2019 at 0:03

Ahmet Gokdayi

31110 silver badges17 bronze badges

1 Comment

Stuart Hingston Over a year ago

Thank you for your help. This makes perfect sense and probably the correct answer but unfortunately I'm to inexperienced with Javascript to get this to work. I tried but the buttons were duplicating on the page on click etc.

Collectives™ on Stack Overflow

javascript multiple time on same page

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related