QA@IT

welcartで『続きを読む』ボタンが動かない

3822 PV

『続きを読む』のボタンをおしても反応がなくて困っています。

jsを使って実装しました。

<script type="text/javascript">
$(document).ready(function() {
    $('.skuTableSubmit input[type=submit]').val(' ');
    var descHeight = $('#itemDescription').height();
    if( descHeight >= 100 ) {
        $('#itemDescription').css('height','100');
    }
    $('.moreDesc a').click(function(){
        $('#itemDescription').animate({'height':descHeight}, 300);
        setTimeout(function(){$('.moreDesc').remove()}, 100);
    }); 
});
</script>

商品説明は以下のようにコーディングしています。

<section>
        <h2 class="width760">DESCRIPTION<small> この商品について</small></h2>
        <div class="entry" id="itemDescription">
        <?php the_content(); ?>

        <?php if( $item_custom = usces_get_item_custom( $post->ID, 'list', 'return' ) ) : ?>
            <p><?php echo $item_custom; ?></p>
        <?php endif; ?>

        </div>

        <?php global $post; if ( !empty($post->post_content) ):?>
            <p class="width760 centering moreDesc"><a href="#moreDescription">続きを読む</a></p>
        <?php endif; ?>
</section>

なにか原因として考えられることを教えて頂けますと幸いです。
どうぞよろしくお願いいたします。

  • 解決法を追記しました。 -

回答

このリンク先はデモサイトですか?

easingプラグイン使っているのに普通のanimateの様に呼んでいるからだとは思いますが、
この程度の問題(Chromeでコンソール開けばすぐわかります)が解決できないのにお金使うサイトはちょっと勘弁して欲しいです。
(個人的な意見です)

追記しました。

Chromeなどに付属のデベロッパーコンソールを開きjavascriptのログを見ると以下の様に出力されます。
(ChromeであればCtrl+Shift+iで開かれた下のパネルの「Console」タブ)

すると以下の様な出力がされているとおもいます(ちょっと見づらくてすいません)。

Uncaught TypeError: Property 'undefined' of object #<Object> is not a function jquery.easing.js:46
jQuery.extend.swing jquery.easing.js:46
$.run jquery.min.js:3
P.u jquery.min.js:1
st.fx.timer jquery.min.js:3
P jquery.min.js:1
a jquery.min.js:3
st.extend.dequeue jquery.min.js:1
(anonymous function) jquery.min.js:1
st.extend.each jquery.min.js:1
st.fn.st.each jquery.min.js:1
st.fn.extend.queue jquery.min.js:1
st.fn.extend.animate jquery.min.js:3
(anonymous function) samsung-galaxy-s4-lte-2:306
st.event.dispatch jquery.min.js:2
y.handle jquery.min.js:2

どこを見るかはエラーによりけりですが、とりあえず自分のサイトの部分が気になりますので開くと

   $('#itemDescription').animate({'height':descHeight}, 300);

が 306行目でした。

また、エラーメッセージをみると

Uncaught TypeError: Property 'undefined' of object #<Object> is not a function   jquery.easing.js:46

と、jquery.easing.js で発生しているエラーであることがわかります。

  1. jQuery.easing.jsで利用するつもりだった場合
    jQuery easing pluginを使う場合、第三引数にイージングの種類を指定するそうです。
    ですからたとえば

    $('#itemDescription').animate({'height':descHeight}, 300, 'linear');
    

    としなければなりません。

  2. 素のjQueryを使うつもりで jQuery.easing.jsなんて知らない。他のできっと勝手に入った。という場合
    jQueryのanimateはeasingプラグインに書き換えられているようですから以下の様に。

    jQuery('#itemDescription').animate({'height':descHeight}, 300);
    

    とすればよいでしょう。

このいずれかで解決すると思います。

厳しいことを書きましたが、javascriptは後からかぶせると上書きされます。エラーメッセージが表示されている中でもうすこしエラーの原因に迫れないともしもの時に気づくのが遅れたりします。
UIの話ならなんてことはないんですが、個人情報や金銭関連の部分には一層気を付けるようにしてください。

編集 履歴 (2)
  • 厳しいご意見ありがとうございます。
    また、リンク先はデモサイトではありません。

    現在PHP, JavaScriptを勉強している身であり、今後も継続して勉強をしていきたいと考えております。

    もし可能であれば、もう少し詳細にお教えいただくことは可能でしょうか?
    お忙しいところ恐れ入りますが、アドバイスいただけますと幸いです。
    どうぞよろしくお願いいたします。
    -
  • エラーの確認方法まで解説いただき、誠にありがとうございます。
    ご指摘のとおり「個人情報や金銭関連の部分」には細心の注意をはらい、サイト運営をしていきたいと思います。

    お忙しいなか、本当にありがとうございました。
    -
ウォッチ

この質問への回答やコメントをメールでお知らせします。