Question

我在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>，它不起作用。

请提供任何帮助。

由于

Answer 1

firstDescendant()不是jQuery方法。这似乎来自优秀的原型。我认为你有一些教程或其他东西混在一起。

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

Answer 2

对于初学者，尝试将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()
    });
});

Answer 3

如果由于$符号而与Prototype发生冲突，可以通过将jQuery逻辑包装在此来解决此问题：

(function($) {
    // jQuery logic here
})(jQuery);

冲突jQuery选项卡

3 个答案: