2

我在我的 magento 商店中使用以下脚本制作标签幻灯片。看起来它正在导致 jQuery 冲突。我尝试使用jQuery.noConflict()但没有帮助。

<script type="text/javascript">
            var current = 0;
            $('tabs').firstDescendant().className += ' active-tab';
            var active_tab = $('tabs').firstDescendant().firstDescendant().firstDescendant();
            var motion = false;
            function move_to(to, el){    
               if (!motion) {
                el.parentNode.parentNode.className += ' active-tab';
                if (active_tab) {
                active_tab.parentNode.parentNode.className = 'corner-left-top';
                }
                active_tab = el;    
                move = (current - to)*690;
                new Effect.Move($('tabber'), { x: move, beforeStart:function(){ motion = true;},afterFinish:function(){motion = false;}});
                current = to;
               }
            }        
        </script>

这是脚本的 PHP 代码：

<div id="tabs" class="tabs">
    <?php $tabs = 0; ?>
    <?php if ($_description = $this->getChildHtml('description')):  ?>
    <div id="width-tab" class="corner-left-top">
        <div class="corner-right-top" >
            <div class="border-top" onclick="move_to(<?php echo $tabs; $tabs++;?>, this)">
                <h3 style="color:#000;"><?php echo strtoupper($this->__('Overview')); ?></h3>
            </div>
        </div>
    </div> 
    <?php endif;?>
    <div id="width-tab-2" class="corner-left-top">
        <div class="corner-right-top">
            <div class="border-top" onclick="move_to(<?php echo $tabs; $tabs++;?>, this)">
                <h3 ><?php echo strtoupper($this->__('Specification')); ?></h3>
            </div>
        </div>
    </div>
    <?php  if ($_product->isSaleable() && $this->hasOptions()):?>
        <div id="width-tab-3" class="corner-left-top">
            <div class="corner-right-top">
                <div class="border-top" onclick="move_to(<?php echo $tabs; $tabs++;?>, this)">
                    <h3><?php echo strtoupper($this->__('Buy')); ?></h3>
                </div>
            </div>
        </div>
        <?php endif; ?><br class="clear-block" />


<ul id="tabber">
    <li id="container_1" class="tabs-list">Product Description</li>
    <li id="container_2" class="tabs-list">Product Specifications</li>                                      
    <li id="container_3" class="tabs-list">Add to Cart button</li>
</ul>

问题： id container_3 包含一个“添加到购物车”按钮<button type="button" title="Add to Cart" class="button btn-cart" onclick="productAddToCartForm.submit(this)"><span><span>Add to Cart</span></span></button>，该按钮不起作用。

请任何帮助将不胜感激。

谢谢

4

3 回答 3

3

firstDescendant()不是 jQuery 方法。这似乎来自良好的原型。我想你有一些教程或一些混淆。

此外，您需要在准备好的 DOM上运行您的脚本，除非它嵌入在标记之后，但在生产中您无论如何都会分离这些文件。

于 2012-07-29T04:48:19.317 回答
1

对于初学者，尝试将 move 设置为局部变量 ( var move...)，其次，我很确定没有firstDescendant方法，除非您使用自己的自定义脚本。无论如何，请尝试$("tabs").children().first()改用，因为该自定义脚本可能会导致冲突。

编辑1：

更改您的代码以在 $(document).ready() 中包装您可以使用的任何内容 - 这将确保您所有动态和随后添加的元素都包含在使用 jQuery 选择器填充的集合中。还将任何多次使用的选择器设置为变量以提高效率。代码：

var current = 0;
var motion = false;
var active_tab;

function move_to(to, el) { ..... }

$(document).ready(function () {
    var $tabs = $("tabs");
    $tabs......
    active_tab = .....
    /* note that I stopped coding here because I think that you may have 
       gone in the wrong direction for a few of these lines*/
});

编辑2：

从添加到购物车按钮的 HTML 元素中删除 onclick 事件处理程序，并将其移动到 jQuery 中的 $(document).ready() 处理程序（让我们尝试将所有脚本保存在同一个位置 - 至少现在是这样）：

$(document).ready(function() { 
    $(".btn-cart").click(function () {
       //assuming the id of the form is productAddToCartForm and the form data is
       //already filled out:
       $("#productAddToCartForm").submit()
    });
});
于 2012-07-29T04:51:53.370 回答
1

如果您因为$符号而与 Prototype 发生冲突，您可以通过将 jQuery 逻辑包装在以下内容中来解决此问题：

(function($) {
    // jQuery logic here
})(jQuery);
于 2012-07-29T04:52:39.787 回答