How to change value of character in Javascript?

I have this code here,

{foreach from=$cart.cartItems item="item" name="cart"}    

<div id="cart2Produkt">


 <p>{if $item.Product.ID}
                    <a href="{productUrl product=$item.Product}" data-tooltip="sticky1">{$item.Product.name_lang|truncate:20}</a>
                {else}
                    <span>{$item.Product.name_lang|truncate:20}</span>
                </a>
            {/if}
                <div id="mystickytooltip" class="stickytooltip">

<div style="padding:5px;">

<div id="sticky1" class="atip" style="width:200px;">

<img src="{$item.Product.DefaultImage.paths.3}" alt="{$item.Product.name_lang|escape}"><br>
{$item.Product.name_lang}

</div>

</div>
<div class="stickystatus"></div>

</div开发者_如何学Python>

</p>
 <p>
 {include file="order/itemVariations.tpl"}
            {include file="order/block/itemOptions.tpl"}

            {if $multi}
                {include file="order/selectItemAddress.tpl" item=$item}
            {/if}
            </p>
</div>

{/foreach}

I want to change the "1"in "sticky1" to a "2" everytime this loops (it's part of a foreach).

But no luck.. Plus I am kinda new to Javascript and don't know how to document write it where I want it.

Looks like you want to use the smarty iteration counter to set the id. Have a look at Example 7-11 here: http://www.smarty.net/manual/en/language.function.foreach.php

{* this will output sticky1, sticky2, sticky3, ... etc *}

{foreach from=$cart.cartItems item="item" name="cart"}
    sticky{$smarty.foreach.cart.iteration},
{/foreach}

It's going to be much more effective to change it while you are generating the code in your foreach loop than to fix it later with javascript. Note that if someone has javascript disabled, your code won't run and the changes won't be made. If you make the change server-side, then it gets generated correctly in the first place.

Example:

{foreach from=$cart.cartItems item="item" name="cart"}    

<div id="cart2Produkt">


 <p>{if $item.Product.ID}
                    <a href="{productUrl product=$item.Product}" data-tooltip="sticky{$item.Product.ID}">{$item.Product.name_lang|truncate:20}</a>
                {else}
                    <span>{$item.Product.name_lang|truncate:20}</span>
                </a>
            {/if}
                <div id="mystickytooltip" class="stickytooltip">

<div style="padding:5px;">

<div id="sticky{$item.Product.ID}" class="atip" style="width:200px;">

...

Using javascript (and jQuery to achieve the same thing later).

   $(function() {
         $('[data-tooltip=sticky1]').each( function(i) {
              var tipNo = i + 1;
              $(this).attr('data-tooltip','sticky' + i);
         });
   });

FWIW, using document.write() will only append things to the document. You need to navigate the DOM, either using jQuery (or another framework) or plain javascript to find the element you want to change and update it's property. Using a framework, IMO, is usually much easier than writing the same code with plain javascript.