• 締切済み

AtomでjQueryは使えますか？

ローカルフォルダ内にindex.html、contact.html、style.css、contact.css、script.js、5つのファイルを作成し、Atomでコーディング中です。 index.htmlとcontact.htmlの<head></head>内で<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>とし、</body>直前で<script src="./script.js"></script>、又、script.jsに$(function(){この中にコード});と記述。 (1)まずここで質問ですが、これでjQueryの使用環境は整ってますでしょうか？ 続きまして、先ほどの質問内容とは違ってしまいますが、アコーディオン作成のため、index.html内の <div class="qa"> 　<h1 class="question-text"> <span class="fa fa-question-circle"></span> 名前は何ですか？ 　</h1> <span id="up" class="fa fa-angle-up"></span> <p class="answer-text">ほげほげです。</p> </div>に対してscript.jsにて $('.question-text').click(function(){ var $answer=$(this).parent().find('.answer-text'); if($answer.hasClass('open')){ $answer.removeClass('open'); $answer.slideUp(); $(this).parent().find('#down').html('<span id="up" class="fa fa-angle-up"></span>'); }else{ $answer.addClass('open'); $amswer.slideDown(); 　　$(this).parent().find('#up').html('<span id="down" class="fa fa-angle-down"></span>'); } }); と記述。→グーグルのブラウザで確認。→クリックしても動かない。 という状況です。 (2)ここでまた質問ですが、(1)の時点でjQuery使用環境が整っていれば、動かない理由は単に私のコードが間違っている事になる訳ですが、どうでしょうか・・・？ ご意見賜りたくお願い申し上げます。

みんなの回答

回答No.2

(１)これでjQueryの使用環境は整ってますでしょうか？ →OKです。 (２)ここでまた質問ですが、・・・ →以下の箇所を訂正してみましょう。 $amswer.slideDown(); ↓スペルミス $answer.slideDown();

回答No.1

はい、できます。Pythonとatomから構築されたこのツールをご覧ください。 https://www.folio3.ai/converse-smartly-try-now/

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • jQueryプラグイン、サーバー上だと動かない。

    こんにちは。 このたび制作しているWEBサイトにjQueryプラグインのprettyphotoを実装したいのですが、ローカルの環境では問題なく動いてくれるのですが、サーバーにアップしたとたんにエラーがでてしまいまったく動いてくれません。 <head>内のスクリプトの記述は <script src="js/libs/modernizr-2.0.6.min.js"></script> <script src="js/prettyphoto/js/jquery-1.6.1.min.js"></script> <script src="js/prettyPhoto/js/jquery.prettyPhoto.js"></script> <script type="text/javascript" charset="utf-8"> $(document).ready(function(){ $("a[rel^='prettyPhoto']").prettyPhoto({theme:'light_rounded'}); }); </script> という感じです。 ※そのほか直前にprettyphotoのCSSは読み込んでおります サーバーにアップしたページのソースをみてみるとCan't find variable:$というメッセージがでていたのでプラグインの記述を (function($){ // $(document).ready(function(){ $("a[rel^='prettyPhoto']").prettyPhoto({theme:'light_rounded'}); }); }(jQuery)); // にしてみてもCan't find variable:jQueryというメッセージがでてきてしまいます。 こちらもともとテンプレートであったサイトを改変しているものなので、このほかHTML後半部分にもいろいろjavascriptの記述があります。以下となります。 <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</script> <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="js/jquery.easing.compatibility.js"></script> <script type="text/javascript" src="js/jquery.validate.pack.js"></script> <script type="text/javascript" src="js/cycle/jquery.cycle.all.latest.js"></script> <script type="text/javascript" src="js/jquery.tweet.js"></script> <!-- super fish js include --> <script type="text/javascript" src="js/superfish/js/superfish.js"></script> <script type="text/javascript" src="js/superfish/js/hoverIntent.js"></script> <script defer src="js/plugins.js"></script> <script defer src="js/script.js"></script> レイアウトが崩れないようひとつひとつとりはずしてみたのですがprettyphotoは動いてくれませんでした。 またパスが間違っていないかも何度もチェックはしたつもりです。 本当に困っているのですが、このような時どうやって原因を探していけばよいのか、何かアドバイスを いただけたらと思い投稿させていただきました。 当方、WEB制作初心者のため、見当はずれなことを訊いていましたらご容赦ください。 どうぞよろしくおねがいします。

    • ベストアンサー
    • HTML
  • jqueryの表示非表示に関する質問

    jqueryの初心者です。 調べてもわからなかったので質問します。 display:noneで要素を非表示にし、クリックしたときに要素をcssで表示するようにしたのですが別のボタンを押したときにまた非表示にすると2回押さないと表示してくれなくなります。 具体的には下記のような感じのサンプルを作ってみました。 表示・非表示ボタンをクリックしたら交互に表示・非表示が切り替わるのですがクリアボタンを押した後に表示・非表示ボタンを押すとなぜか2回クリックしないと表示しません。 どなたかご教授いただけませんか？ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jq表示/非表示test</title> </head> <style type="text/css"> .text_h{ display:none; } .text_v{ display:inline; } </style> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript"> $(function() { $("#a01").toggle(function(){ $(this).parent().next().children("span").attr("class","text_v"); },function(){ $(this).parent().next().children("span").attr("class","text_h"); }); $("#clear").click(function(){ $(this).parent().next().children("span").attr("class","text_h"); }); }); </script> <body><p> <input type="button" value="表示・非表示" id="a01" /> <input type="button" value="クリア" id="clear" /> </p> <p><span class="text_h">ボタンを表示します</span></p> </body> </html>

  • jQueryのcontainsフィルターについて

    こんにちは。 jQueryについてご質問があります。 jQueryのcontainsフィルターで要素を取得できなくて困っております。 たとえば以下のようなHTMLがあるとします。 ======================== <g class="parent"> <text width="50" height="50" x="10" y="10"><tspan>abc</tspan></text> </g> ======================== このときtspan要素を取得したい場合、 $("g.parent text tspan:contains('abc')"); のようにしても取得できないのです。 例えば次のパターンの場合 ========================= <section class="parent"> <p><span>abc</span></p> </section> ========================= $("section.parent p span:contains('abc')"); というコードを実行すると正確にspan要素を取得できます。 前者の場合はなぜ取得できないのでしょうか？ ご教示よろしくお願いいたします。

  • JQUERYのいくつかが順番によって機能しなくなり

    JQUERYのいくつかが順番によって機能しなくなります。 干渉を起こしているのかと思うのですが、どうすれば解決できるのでしょうか？var j = jQuery.noConflict();などをやってみましたが、知識不足でうまくいきませんでした。 ・top messageのみ動く。 var j = jQuery.noConflict(); <!--page-scroll--> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript" src="js/jquery.page-scroller.js"></script> ・fontsizeとtop messageのみ動く。 <!--script--> <a href="#main" class="gotop"></a> <!--top message--> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript" src="js/message.js"></script> <!--fontsize--> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript" src="js/jquery.textresizer.min.js"></script> <script> $(function(){ $("h1+ul a").textresizer({ target: "#contentsrighttop,.copyright,address,div#list div p",type: "fontSize",// サイズ指定方法 sizes: [ "13px", "15px", "20px"],// フォントサイズ selectedIndex: 1 // 初期表示 }); }); </script> <!--page-scroll--> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript" src="js/jquery.page-scroller.js"></script> <!--script end--> <!--fontsize--> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript" src="js/jquery.textresizer.min.js"></script> <script> jQuery(function(){ jQuery("h1+ul a").textresizer({ target: "#contentsrighttop,.copyright,address,div#list div p",type: "fontSize",// サイズ指定方法 sizes: [ "13px", "15px", "20px"],// フォントサイズ selectedIndex: 1 // 初期表示 }); }); </script> <!--top message--> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript" src="js/message.js"></script> <!--script end-->

  • mootoolsとjQueryの共存がうまくいかない。

    mootoolsとjQueryの共存がうまくいかない。 ▼共存参考サイト http://h2ham.seesaa.net/article/106053238.html 参考サイトを見て、共存したいのですが、Operaでうまくいきません。 IE、fox、safari、chromeではうまくいくのですが・・・ $をj$などに変えてみたりいろいろ試しましたがうまくいきませんでした。 お力添えよろしくお願いします。 <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="../js/yuga.js" charset="utf-8"></script> <script type="text/javascript" src="../js/jquery-easing-1.3.pack.js"></script> <script type="text/javascript" src="../js/jquery-easing-compatibility.1.2.pack.js"></script> <script type="text/javascript" src="../js/coda-slider.1.1.1.pack.js"></script> <script type="text/javascript"> var theInt = null; var $crosslink, $navthumb; var curclicked = 0; theInterval = function(cur){ clearInterval(theInt); if( typeof cur != 'undefined' ) curclicked = cur; $crosslink.removeClass("active-thumb"); $navthumb.eq(curclicked).parent().addClass("active-thumb"); $(".stripNav ul li a").eq(curclicked).trigger('click'); theInt = setInterval(function(){ $crosslink.removeClass("active-thumb"); $navthumb.eq(curclicked).parent().addClass("active-thumb"); $(".stripNav ul li a").eq(curclicked).trigger('click'); curclicked++; if( 5 == curclicked ) curclicked = 0; }, 15000); }; $(function(){ $("#main-photo-slider").codaSlider(); $navthumb = $(".nav-thumb"); $crosslink = $(".cross-link"); $navthumb .click(function() { var $this = $(this); theInterval($this.parent().attr('href').slice(1) - 1); return false; }); theInterval(); }); </script> <script type="text/javascript"> <!-- jQuery.noConflict(); var j$ = jQuery; --> </script> <script src="../js/mootools.js" type="text/javascript"></script> <script src="../js/menu.js" type="text/javascript"></script> <script src="../js/main.js" type="text/javascript"></script>

  • prototype+jquery+プラグイン

    prototype.jsとjqueryとプラグイン系の読み込み方が良くわかりません。 クロスブラウザ対応のMP3プレイヤーを導入したく追加したのですが 順番を並べ変えたりいろいろしましたが導入する事ができずにこまっています。 何かいい方法はないでしょうか？ エラーの内容も順序によって様々です・・・・ <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript" src="lightbox.js"></script> <script type="text/javascript" src="lightbox_shortcut_keys_addon.js"></script> <script type="text/javascript" src="slide3/script/jquery-1.2.2.js"></script> <script type="text/javascript" src="jquery.cycle.all.js"></script> <script type="text/javascript" src="jquery.easing.1.3.js"></script> <script type="text/javascript" src="jquery.jcarousel.pack.js"></script> <script type="text/javascript"> jQuery.noConflict(); var $j = jQuery; </script> 以下追加===================================================== <script type="text/javascript" src="jquery-1.4.2.js"></script> <script type="text/javascript" src="jquery.compat-1.3.js"></script> <script type="text/javascript" src="jquery.jplayer.min.js"></script> <script type="text/javascript"> jQuery.noConflict(); var $j = jQuery; $j(document).ready(function(){ $("#mp3").jPlayer(); }); </script>

  • jQuery

    http://bmath.org/wordpress/?p=663 上記を参考にＷＥＢページをつくってみたのですが、上手くいきません。 javascript部分をｈｔｍｌの <script type="text/javascript" src="js/site.js"></script>にいれたからでしょうか？ また、ｊｓフォルダは<script type="text/javascript" src="js/jquery.scrollTo-min.js">ではなく、jquery.scrollTo-1.4.3.1を使っています。 よきアドバイスお願いします。

    • ベストアンサー
    • CSS
  • jqueryにて

    こちらではお初にお世話になります。 よろしくおねがいします！ さて、jqueryを用いてScrollFollowを実装中なのですが、 正常に動作させることが出来ません。 ソースは <script type="text/javascript" src="./jslib/ui.core.js"></script> <script type="text/javascript" src="./jslib/jquery-1.2.6.js"></script> <script type="text/javascript" src="./jslib/jquery.scrollfollow.js"></script> <script type="text/javascript" src="./jslib/jquery.easing.1.3.js"></script> <script type="text/javascript" src="./jslib/jquery.cookie.js"></script> <script type="text/javascript"> $( document ).ready( function (){ $('test').scrollFollow({ }); }); </script> をヘッド部分に、 <div id="test"> コンテンツ </div> をBODYに記述しています。 動作せずにFirefoxのエラーコンソールで確認したところ エラー: jQuery is not defined ソースファイル: （省略）update/jslib/ui.core.js 行: 238 エラー: $("test").scrollFollow is not a function ソースファイル: http://contest2009.thinkquest.jp/tqj2009/110392/update/ 行: 13 と表示されました。jsファイルの生存は確認できており、 その系統のミスではないと思うのですが。。。 どなたかアドバイスをお願いします！

  • JQUERYをはじめて導入したのですが、

    JQUERYをはじめて導入したのですが、 読込み部分の記述が間違っているのか 「$(document).ready(function(){」のところで一箇所エラーとなります。 「オブジェクトでサポートされてないプロパティまたはメソッドです」となります。 設定内容の、現状は下記です。 「validate」設定を実現したいためにjqueryを導入。 ・JQUERYは現在の最新版のものを入手。 ・読み込んだファイルは全く編集などはしてないもの。 ・パスなどの記述は間違っていないようです。確実にファイルは存在しております。 ・一応パーミッションも確認済みです。 ・id"form-host"もformタグに設定しております。 <script type="text/javascript" src="/common/js/jquery.js"></script> <script type="text/javascript" src="/common/js/jquery.validate.pack.js"></script> <script type="text/javascript" src="/common/js/jquery.validate.js"></script> <script type="text/javascript" src="/common/js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="/common/js/jquery.validate.min.js"></script> <script type="text/javascript" src="/common/js/additional-methods.js"></script> <script type="text/javascript" src="/common/js/messages_ja.js"></script> <script type="text/javascript"> //入力チェック関数に対象フォームIDを指定 $(document).ready(function(){ $("#form-host").validate(); }); </script> jsファイルの読込みの順序が違うのでしょうか、 不必要なjsファイルを読み込んでしまっている？為なのか； validate関連を導入した事があるからいらっしゃれば、 ご教授願います。

  • Jqueryの干渉について

    Jqueryの干渉について Jqueryのライブラリを使ったjsを2つ同時に組み込もうとしておりますが、 干渉してしまっているようで、どちらか一つずつしか使えない状況です。 使おうとしているものは、spacegalleryというものと、nivosliderという jsを使おうとしています。 それぞれ同じサイトの解説文を参照しながら、組み込んでみました。 参考にしたサイトは、 http://www.skuare.net/test/spacegallery.html http://www.skuare.net/test/jnivoslider.html で、headの記述は、 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/eye.js"></script> <script type="text/javascript" src="js/utils.js"></script> <script type="text/javascript" src="js/spacegallery.js"></script> <script> $(document).ready(function(){ $('#myGallery').spacegallery({loadingClass: 'loading'}); }); </script> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/jquery.nivo.slider.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#hoge').nivoSlider({ effect:'random', // sliceDown、sliceDownLeft、sliceUp、sliceUpLeft、sliceUpDown、sliceUpDownLeft、fold、fade、random slices:15, //分割枚数 animSpeed:500, //アニメーションスピード pauseTime:3000, //停止時間 directionNav:true, //方向ナビ directionNavHide:true //隠す }); }); </script> 多分後からの記述の部分が前の記述をリセットさせてしまうと思うのですが、 上手くこの２つのスクリプトを同じページ内で稼働させる記述方法があれば 教えてください。 よろしくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する