#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2013
    Posts
    2
    Rep Power
    0

    Jquery ReplaceWith(), loop needed


    Hi there fellow DevShed users,

    I am having some issues with creating a loop for my function for changing the currency within a table.

    Here's the code i have at the moment...
    Javascript Code:
    $("a").val("USD").click(function(){
    $('tr:nth-child(2) > td:nth-child(6)').replaceWith('<td>$6.38/month</td>');
    $('tr:nth-child(3) > td:nth-child(6)').replaceWith('<td>$2.08/month</td>');
    $('tr:nth-child(4) > td:nth-child(6)').replaceWith('<td>$4.99/month</td>');
    $('tr:nth-child(5) > td:nth-child(6)').replaceWith('<td>$14.95/month</td>');
    $('tr:nth-child(6) > td:nth-child(6)').replaceWith('<td>$2.84/month</td>');
    $('tr:nth-child(7) > td:nth-child(6)').replaceWith('<td>$4.99/month</td>');
    $('tr:nth-child(8) > td:nth-child(6)').replaceWith('<td>$12.46/month</td>');
    $('tr:nth-child(9) > td:nth-child(6)').replaceWith('<td>$3.95/month</td>');
    $('tr:nth-child(10) > td:nth-child(6)').replaceWith('<td>$4.30/month</td>');
    $('tr:nth-child(11) > td:nth-child(6)').replaceWith('<td>$3.96/month</td>');
    });
     
    $("a").val("GBP").click(function(){
    $('tr:nth-child(2) > td:nth-child(6)').replaceWith("<td>&pound;4.08/month</td>");
    $('tr:nth-child(3) > td:nth-child(6)').replaceWith("<td>&pound;1.33/month</td>");
    $('tr:nth-child(4) > td:nth-child(6)').replaceWith("<td>&pound;3.19/month</td>");
    $('tr:nth-child(5) > td:nth-child(6)').replaceWith("<td>&pound;9.57/month</td>");
    $('tr:nth-child(6) > td:nth-child(6)').replaceWith("<td>&pound;1.82/month</td>");
    $('tr:nth-child(7) > td:nth-child(6)').replaceWith("<td>&pound;3.19/month</td>");
    $('tr:nth-child(8) > td:nth-child(6)').replaceWith("<td>&pound;7.98/month</td>");
    $('tr:nth-child(9) > td:nth-child(6)').replaceWith("<td>&pound;2.53/month</td>");
    $('tr:nth-child(10) > td:nth-child(6)').replaceWith("<td>&pound;2.75/month</td>");
    $('tr:nth-child(11) > td:nth-child(6)').replaceWith("<td>&pound;2.53/month</td>");
    });
    </script>



    So everything is working, great ! But if i were to then click back to USD, nothing would happen - because the jquery had already executed. I have tried to create loops using for ( [initialisation]; [conditional]; [iteration] ) but to no avail. Please help, this is time sensitive.

    Thanks guys.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Posts
    101
    Rep Power
    27
    I don't think you are assigning the click handlers properly. Without seeing your HTML, I am going to guess that you have two links, one of which has text "USD" and the other "GBP"?

    Your javascript code is doing this:
    * find all <a> on the page
    * set their values to "USD"
    * set their click handlers to a function that sets a bunch of td values to USD
    * again, find all <a> on the page
    * reset their values, to "GBP"
    * set their click handlers to the other function that sets td values to GBP

    You want to uniquely identify the <a>'s by something like an ID value, then select them uniquely to assign them their own click handler.
    Code:
    <a id="setUSD" href="#">USD</a>
    <a id="setGBP" href="#">GBP</a>
    
    <script>
    $("#setUSD").click(function(){
    $('tr:nth-child(2) > td:nth-child(6)').replaceWith('<td>$6.38/month</td>');
    $('tr:nth-child(3) > td:nth-child(6)').replaceWith('<td>$2.08/month</td>');
    $('tr:nth-child(4) > td:nth-child(6)').replaceWith('<td>$4.99/month</td>');
    $('tr:nth-child(5) > td:nth-child(6)').replaceWith('<td>$14.95/month</td>');
    $('tr:nth-child(6) > td:nth-child(6)').replaceWith('<td>$2.84/month</td>');
    $('tr:nth-child(7) > td:nth-child(6)').replaceWith('<td>$4.99/month</td>');
    $('tr:nth-child(8) > td:nth-child(6)').replaceWith('<td>$12.46/month</td>');
    $('tr:nth-child(9) > td:nth-child(6)').replaceWith('<td>$3.95/month</td>');
    $('tr:nth-child(10) > td:nth-child(6)').replaceWith('<td>$4.30/month</td>');
    $('tr:nth-child(11) > td:nth-child(6)').replaceWith('<td>$3.96/month</td>');
    });
    
    $("#setGBP").click(function(){
    $('tr:nth-child(2) > td:nth-child(6)').replaceWith("<td>4.08/month</td>");
    $('tr:nth-child(3) > td:nth-child(6)').replaceWith("<td>1.33/month</td>");
    $('tr:nth-child(4) > td:nth-child(6)').replaceWith("<td>3.19/month</td>");
    $('tr:nth-child(5) > td:nth-child(6)').replaceWith("<td>9.57/month</td>");
    $('tr:nth-child(6) > td:nth-child(6)').replaceWith("<td>1.82/month</td>");
    $('tr:nth-child(7) > td:nth-child(6)').replaceWith("<td>3.19/month</td>");
    $('tr:nth-child(8) > td:nth-child(6)').replaceWith("<td>7.98/month</td>");
    $('tr:nth-child(9) > td:nth-child(6)').replaceWith("<td>2.53/month</td>");
    $('tr:nth-child(10) > td:nth-child(6)').replaceWith("<td>2.75/month</td>");
    $('tr:nth-child(11) > td:nth-child(6)').replaceWith("<td>2.53/month</td>");
    });
    </script>
    </script>
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2013
    Posts
    2
    Rep Power
    0
    Originally Posted by mod_speling
    Your javascript code is doing this:
    * find all <a> on the page
    * set their values to "USD"
    * set their click handlers to a function that sets a bunch of td values to USD
    * again, find all <a> on the page
    * reset their values, to "GBP"
    * set their click handlers to the other function that sets td values to GBP
    So you're right about the .val()... i thought it was looking for a tags which were = to value of 'x' for example...

    I have sorted this problem a while ago by as you said uniquely identifying each tag for the click function, and all is working swell.

    Thanks for the response friend.

IMN logo majestic logo threadwatch logo seochat tools logo