私のJavaScriptはWordPressのHTMLファイルにロードされませんか？

私のWordPressサイトのあるページでテストとして単純なJavaScriptを実行しようとしていますが、読み込まれません。私のJavaScriptはWordPressのHTMLファイルにロードされませんか？

正しく動作するコードの例は、http://fiddle.jshell.net/psflannery/XAxWv/にあります。

<div class="acord"> 
    <h3>Summer</h3> 
    <div class="acorda"> 
     <h3>test1</h3> 
     <div>test1cont</div> 
     <h3>test2</h3> 
     <div>test2cont</div> 
     <div> 
      <p>Editorial Intro</p> 
     </div> 
    </div> 

    <h3>Spring</h3> 
    <div class="acorda"> 
     <h3>test3</h3> 
     <div>test3cont</div> 
     <h3>test4</h3> 
     <div>test4cont</div> 
     <h3>test5</h3> 
     <div>test5cont</div> 
     <div> 
      <p>Editorial Intro</p> 
     </div> 
    </div> 
</div> 

<script type='text/javascript'> 
jQuery(document).ready(function(){ 
    jQuery(".acord").accordion({ 
     header: "> h3", 
     heightStyle: "content", 
     collapsible: true, 
    }); 
    jQuery(".acorda").accordion({ 
     header: "h3", 
     heightStyle: "content", 
     active: false, 
     collapsible: true, 
    }); 
}); 
</script>

JavaScriptがロードされていない理由については、誰でも助言できますか？

余分な注意として、私は正常にJavascriptの読み込みでコードを実行しました。本当に問題が何であるかを失ってしまいました。

<!DOCTYPE html> 
<html> 
<body> 

<h2>JavaScript Alert</h2> 

<button onclick="myFunction()">Try it</button> 

<script> 
function myFunction() { 
    alert("I am an alert box!"); 
} 
</script> 

</body> 
</html>

EDIT

私は以下の作っ提案にJavaScriptのおかげで変更しました。私の唯一の問題は、私のページでエラーがUncaught TypeError: jQuery(...).accordion is not a functionと言うことです。

私はWordPressテーマのページファイルとheader.phpファイルの両方にjQuery UI依存関係を追加しようとしましたが、いずれも動作していません。

<script src="code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>

誰かが依存関係の問題を解決する方法を知っていますか？あなたのスクリプトで$を使用しているウェブサイトに

出典

2017-08-02 Alex F

JSがDOM要素とやりとりする場合は、HTMLの後に来る必要があります。 – Kevin

何をデバッグしましたか？コンソールにはどんなエラーがありますか？ – j08691

@Kevinコードを更新しましたが、引き続き同じ問題があります。 –

トライ使用使用されているのに対し：

jQuery(document).ready(function(){ 
    jQuery(".acord").accordion({ 
     header: "> h3", 
     heightStyle: "content", 
     collapsible: true, 
    }); 
    jQuery(".acorda").accordion({ 
     header: "h3", 
     heightStyle: "content", 
     active: false, 
     collapsible: true, 
    }); 
});

出典

2017-08-02 14:56:15

提案に感謝します。私は試してみましたが、「Uncaught ReferenceError：Jquery is not defined」というエラーが表示されます。 –

ああ申し訳ありませんが、jQueryの@Ramy Nasrが編集しました。 –

私はそれが働いたら教えてください:) –

-1

ウェブサイト上のjQueryを試して、このコード jQuery(".acord").accordion({ header: "> h3", heightStyle: "content", collapsible: true, }); jQuery(".acorda").accordion({ header: "h3", heightStyle: "content", active: false, collapsible: true, });

出典

2017-08-02 14:55:14

javascriptを実行すると、html要素はまだ存在せず、jQueryオブジェクトは空であるため、うまく動作しません。 $（document）.ready（）を追加する必要があります。 – RaV

これも試してみてください。提案していただきありがとうございます。 –

はい、この変更は$（document）.ready（）と一緒に訂正してくれてありがとう。 –

をあなたのテーマのfunctions.phpでスクリプトをインライン化することができます。

これは、スクリプトがenqueue -edであることを前提としています。

アコーディオンjquery拡張ライブラリが$handleがaccordionのenqueue -dの場合、この方法で記述できます。

$accordion = <<<HERE 
$(".acord").accordion({ 
    header: "> h3", 
    heightStyle: "content", 
    collapsible: true, 
}); 
$(".acorda").accordion({ 
    header: "h3", 
    heightStyle: "content", 
    active: false, 
    collapsible: true, 
}); 
HERE; 

wp_add_inline_script('accordion', $accordion);

出典

2017-08-02 15:02:12

私のJavaScriptはWordPressのHTMLファイルにロードされませんか？

答えて

関連する問題