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

シンボルが原因で Prototype と競合している場合は$、jQuery ロジックを次のようにラップすることで解決できます。

(function($) {
    // jQuery logic here
})(jQuery);
于 2012-07-29T04:52:39.787 に答える
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 に答える