工具提示问题，使这个javascript与我的smarty foreach循环一起工作，帮助pelase！

Question

我对www.euroworker.no/order利用提示的例子

我这里有这个代码的工作，但它只是似乎没有正常工作，我用尽了一切我可以想想（不是很多东西）

这是代码。

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

<div class="{zebra loop="cart"}"> 
<div id="sgproductview"> 


<div id="cart2Varekode"> 
<p> 
{if $product.sku} 
    <span class="param">{$item.product.sku}</span> 
    {else} 
    <span>{img src=$item.Product.DefaultImage.paths.1 alt=$item.Product.name_lang|escape}</span> 
    {/if} 
</p> 
</div> 


<div id="cart2Produkt"> 


<p>{if $item.Product.ID} 
    <a href="{productUrl product=$item.Product}" data-tooltip="sticky{$smarty.foreach.cart.iteration}" target="_blank">{$item.Product.name_lang|truncate:20}</a> 

    {else} 
    <span>{$item.Product.name_lang|truncate:20}</span> 
    </a> 
    {/if} 



</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> 
{if $item.Product.DefaultImage.paths.3} 
<div id="mystickytooltip{$smarty.foreach.cart.index}" 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 id="sticky2" class="atip" style="width:200px;"> 

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

</div> 

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

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

</div> 

<div id="sticky4" 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> 
{/if} 


<div id="cart2Price"> 
<p class="actualPrice"> 

{$item.formattedPrice} 
</p> 
</div> 





<div id="salg"></div> 

<div id="cart2Salg"> 
<p></p> 
</div> 



<div id="antallbox"> 
<p class="cartQuant"> 
    {textfield name="item_`$item.ID`" class="text"}   
</p> 
</div> 





<div id="cart2Total"> 
<p> 



{if $item.count == 1} 
    <span class="basePrice">{$item.formattedBasePrice}</span><span class="actualPrice">{$item.formattedPrice}</span> 
    {else} 
    {$item.formattedDisplaySubTotal} 
    <div class="subTotalCalc"> 
    {$item.count} x <span class="basePrice">{$item.formattedBasePrice}</span><span class="actualPrice">{$item.formattedPrice}</span> 
    </div> 
    {/if} 
</p> 
</div> 



<div id="delete"> 

{if 'ENABLE_WISHLISTS'|config} 
    <a href="{link controller=order action=moveToWishList id=$item.ID query="return=`$return`"}">{t _move_to_wishlist}</a> 
    {/if} 
    <a id="slett" href="{link controller=order action=delete id=$item.ID query="return=`$return`"}" title="Slett"><!--{t _remove}--></a> 
    </div> 

</div> 

</div> 


{/foreach} 

和JavaScript

var stickytooltip={ 
    tooltipoffsets: [20, -30], //additional x and y offset from mouse cursor for tooltips 
    fadeinspeed: 200, //duration of fade effect in milliseconds 
    rightclickstick: false, //sticky tooltip when user right clicks over the triggering element (apart from pressing "s" key) ? 
    stickybordercolors: ["#0a5692", "#0a5692"], //border color of tooltip depending on sticky state 
    stickynotice: ["Press \"s\"", "or right click", "to sticky box"], //customize tooltip status message 
    stickynotice2: "Click outside this box to hide it", //customize tooltip status message 

    //***** NO NEED TO EDIT BEYOND HERE 

    isdocked: false, 

    positiontooltip:function($, $tooltip, e){ 
     var x=e.pageX+this.tooltipoffsets[0], y=e.pageY+this.tooltipoffsets[1] 
     var tipw=$tooltip.outerWidth(), tiph=$tooltip.outerHeight(), 
     x=(x+tipw>$(document).scrollLeft()+$(window).width())? x-tipw-(stickytooltip.tooltipoffsets[0]*2) : x 
     y=(y+tiph>$(document).scrollTop()+$(window).height())? $(document).scrollTop()+$(window).height()-tiph-10 : y 
     $tooltip.css({left:x, top:y}) 
    }, 

    showbox:function($, $tooltip, e){ 
     $tooltip.fadeIn(this.fadeinspeed) 
     this.positiontooltip($, $tooltip, e) 
    }, 

    hidebox:function($, $tooltip){ 
     if (!this.isdocked){ 
      $tooltip.stop(false, true).hide() 
      $tooltip.css({borderColor:'black'}).find('.stickystatus:eq(0)').css({background:this.stickybordercolors[0]}).html(this.stickynotice) 
     } 
    }, 

    docktooltip:function($, $tooltip, e){ 
     this.isdocked=true 
     $tooltip.css({borderColor:'darkred'}).find('.stickystatus:eq(0)').css({background:this.stickybordercolors[1]}).html(this.stickynotice) 
    }, 


    init:function(targetselector, tipid){ 
     jQuery(document).ready(function($){ 
      var $targets=$(targetselector) 
      var $tooltip=$('#'+tipid).appendTo(document.body) 
      if ($targets.length==0) 
       return 
      var $alltips=$tooltip.find('div.atip') 
      if (!stickytooltip.rightclickstick) 
       stickytooltip.stickynotice[1]='' 
      stickytooltip.stickynotice=stickytooltip.stickynotice.join(' ') 
      stickytooltip.hidebox($, $tooltip) 
      $targets.bind('mouseenter', function(e){ 
       $alltips.hide().filter('#'+$(this).attr('data-tooltip')).show() 
       stickytooltip.showbox($, $tooltip, e) 
      }) 
      $targets.bind('mouseleave', function(e){ 
       stickytooltip.hidebox($, $tooltip) 
      }) 
      $targets.bind('mousemove', function(e){ 
       if (!stickytooltip.isdocked){ 
        stickytooltip.positiontooltip($, $tooltip, e) 
       } 
      }) 
      $tooltip.bind("mouseenter", function(){ 
       stickytooltip.hidebox($, $tooltip) 
      }) 
      $tooltip.bind("click", function(e){ 
       e.stopPropagation() 
      }) 
      $(this).bind("click", function(e){ 
       if (e.button==0){ 
        stickytooltip.isdocked=false 
        stickytooltip.hidebox($, $tooltip) 
       } 
      }) 
      $(this).bind("contextmenu", function(e){ 
       if (stickytooltip.rightclickstick && $(e.target).parents().andSelf().filter(targetselector).length==1){ //if oncontextmenu over a target element 
        stickytooltip.docktooltip($, $tooltip, e) 
        return false 
       } 
      }) 
      $(this).bind('keypress', function(e){ 
       var keyunicode=e.charCode || e.keyCode 
       if (keyunicode==115){ //if "s" key was pressed 
        stickytooltip.docktooltip($, $tooltip, e) 
       } 
      }) 
     }) //end dom ready 
    } 
} 

//stickytooltip.init("targetElementSelector", "tooltipcontainer") 
stickytooltip.init("*[data-tooltip]", "mystickytooltip") 

我需要添加智者指数“mystickytooltip”有我想..的JavaScript的相当于我没有使用Javascript太多的经验..

谢谢

Answer 1

您显示的代码是一个循环，但循环的内容（将重复的标记）将id值赋值给elemen TS。例如：

<div id="mystickytooltip" class="stickytooltip"> 

如果你输出的一个以上的（我假设你，因为它是在环），这是无效的HTML，将无法正常工作 - id values must be unique within a document。

我不知道这是与提示的问题，但它需要固定的，也许它会清除问题（如工具提示很可能是自己与元素通过id关联）。你有很多元素输出与硬编码id s在该HTML中，他们都将需要看到。

您可以使id独一无二的一种方法是将loop index附加到它们。我的Smarty-fu没有任何影响，但类似：

<div id="mystickytooltip{$smarty.foreach.cart.index}" class="stickytooltip"> 

...因为您的循环名为cart。