JqueryとJqueryUIについて

前へ 次へ
このQ&Aのポイント
  • JqueryとJqueryUIを使ったボタンを押すと文字が表示・非表示される動作の実現方法
  • Jqueryのバージョンによって動作しない場合があるため、最新バージョンを試してみる
  • JSファイルの場所を確認する必要がある
回答を見る
  • ベストアンサー

Jquery　と　JqueryUIについて

現在、Jquery　と　JqueryUIを使ってプログラムを書いています。上手く動作しないので以下について教えてください。 やりたいことは、ボタンを押すと文字があらわれたり消えたりするという動作を実現したいと思っていますが、今は、ボタンと文字が表示されるのみで、ボタンを押しても全く動きません。 現在書いているコードは以下のとおりです。 ---- <html> <head> <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script> <script> $(function() { $('#button').click(function(){ $('#sample-text').show(); }); }); </script> </head> <body> <input type="button" id="button" value="ボタン"> <p id="sample-text">Hello World!</p> </body> </html> ------------------- Jqueryのバージョンは、最初、UIとの互換性を考え、1.3.2を使っていましたが、動かないため、現在は新しいバージョンで試してみたところです。(１．４．４でもだめでした） JSファイルの場所は、上記htmlファイルと同じ階層のjsディレクトリ内です。 また、補足ですが、これが上手くいけば、script内の　show メソッドのかわりに　ｔoggleを使いたいと考えています。 上記コードで間違っている部分がわかる方がいらっしゃいましたら教えてください。 よろしくお願いいたします。

  • AJAX
  • 回答数3
  • ありがとう数3

質問者が選んだベストアンサー

  • ベストアンサー
  • t_ohta
  • ベストアンサー率38% (5080/13276)
回答No.2

正しく動作していますよ。 showメソッドは非表示のものを表示する機能です。 テキストが最初から表示されているので、showメソッドを読んでも変化しません。 ヘッダー部分に <style>#sample-text { display: none; }</style> を追加してみて下さい。 そうすると、最初はテキストが表示されず、ボタンを押下することで表示されるようになります。 ボタン押下で出たり消えたりさせたいのであれば、 $(function() { $('#button').click(function(){ if($('#sample-text').css("display") == "none") { $('#sample-text').show(); } else { $('#sample-text').hide(); } }); }); とスクリプトを書き換えてみて下さい。

tanakataro2010
質問者

お礼

ありがとうございました。 うまく稼動しました。 テキストが最初から表示されているために、動かないとはごもっともです。。。 プログラミング初心者のために、基本的な部分でつまっていました。 ありがとうございました。

その他の回答 (2)

回答No.3

$(function() { 　　　　$('#button').toggle( 　　　　　　　　function(){ 　　　　　　　　　　　　$('#sample-text').hide(); 　　　　　　　　} 　　　　　　　　, function(){ 　　　　　　　　　　　　$('#sample-text').show(); 　　　　　　　　} 　　　　}); });

tanakataro2010
質問者

お礼

こちらもうまくできました。 toggleを使ったコードを教えていただきありがとうございます。 色々な書き方があるんですね。 ありがとうございました。

  • LancerVII
  • ベストアンサー率51% (1060/2054)
回答No.1

こんにちは。 最初から表示されている要素に対してshow()を実行しても何も変化しないです。 toggle()にすれば表示されているHello World!が表示されたり非表示になったりしますよ。 今のままのスクリプトで試すのであれば <style type="text/css"> #sample-text { display:none; } </style> としておく必要があります。 そうすれば最初は表示されていないHello World!がボタンを押した時にshow()が実行され、表示されます。 最初から表示されているから動いていないように見えているだけだと思いますので jQueryとuiのバージョンは関係無いと思います。 jsが読み込まれているか確認するなら $(function() { alert ( 'a' ); }); としてalertが表示されるか見てみてください。

tanakataro2010
質問者

お礼

こちらの方法もうまくできました。　バージョンは関係ないんですね。 また、alertの確認方法も教えていただきありがとうございました。 今後のエラー時に役立つと思います。 ありがとうございました。

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

関連するQ&A

  • jQueryで質問です。

    jQueryで質問です。 オブジェクトA、Bがあるとします。 Aをドラッグすると、mousedownかdragstartの段階で要素がBに置き換わってドラッグさせるような動きは可能でしょうか。 作成中のソースを記載します。 <html> <head> <title>test</title> <script type="text/javascript" src="./jquery.min.js"></script> <script type="text/javascript" src="./ui/jquery.ui.core.js"></script> <script type="text/javascript" src="./ui/jquery.ui.widget.js"></script> <script type="text/javascript" src="./ui/jquery.ui.mouse.js"></script> <script type="text/javascript" src="./ui/jquery.ui.draggable.js"></script> <script type="text/javascript" src="./ui/jquery.ui.droppable.js"></script> <script type="text/javascript"> $(function(){ obj1 = $("#box"); obj2 = $('<div style="width:200px;height:200px;background:red;">B</div>'); obj1 .mousedown( function(){ obj1.replaceWith(obj2); obj2.draggable(); } ); }); </script> </head> <body> <div style="width:200px; height:100px; background: #cccccc;" id="box">A</div> </body> </html> これだと、Aのドラッグを一度解除して、Bをドラッグすると上手くいきますが、1回のモーションでBをドラッグさせたいのです。 宜しくお願いします。

  • 複数jQueryの配置で干渉　設置位置

    Javascript事は全くわかりませんが、色々なプラグインとしてjQueryを利用しています。 ----------------- jQueryに干渉があったようで、正常に動作させたいのですが、疑問があります。 １サイト目（HTML 最下部に配置） <script src="vendor/jquery.min.js" type="text/javascript"></script> <script src="js/layout.min.js" type="text/javascript"></script> 正常に動作します。 ２サイト目（HTML head内に配置） <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="js/abcd.js" type="text/javascript"></script> 正常に動作します。 上記の２サイトを合体させた：（HTML 最下部に配置） <script src="vendor/jquery.min.js" type="text/javascript"></script> <script src="js/layout.min.js" type="text/javascript"></script> <script src="js/abcd.js" type="text/javascript"></script> すると、 layout.min.jsに不具合がでるようです・・・ <script src="vendor/jquery.min.js" type="text/javascript"></script> <script src="js/layout.min.js" type="text/javascript"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="js/abcd.js" type="text/javascript"></script> でも、ダメです。 <script src="vendor/jquery.min.js" type="text/javascript"></script> を <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> に変更してもダメでした。 tel.js内を、 jQuery.noConflict(); (function($) { $(function(){ を $j に変えたり、 jQuery に 書き替えてもダメでした・・・ そこで、以下のように移動しましたら動作しました。 （HTML header内に配置） <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="js/abcd.js" type="text/javascript"></script> （HTML 最下部に配置） <script src="vendor/jquery.min.js" type="text/javascript"></script> <script src="js/layout.min.js" type="text/javascript"></script> 上記のように、 HTML head部と、HTML 最下部に分けるのは、正しい方法なのでしょうか？

  • jQuery.jsを使ったhtml外部読み込み

    教えてください。 現在Jqueryを使用して外部htmlを読み込ませようとしていますが、 うまくいきません・・・ ■本体html <head> <script src="js/jquery-1.8.3.min.js"></script> </head> <body> <script type="text/javascript" src="sample.js"></scrip> <div id="sample"></div> </body> ■sample.js // JavaScript Document $(function(){ $("#sample").load("sample.html"); }); ■読み込ませるsample.html　特に設定なし このような感じですが、全然読み込めません。。。 javascriptを外部リンクにしているのは、読み込むhtmlが複数ある為、 headの見栄えが悪くなるからという個人的な意見です・・・ 済みませんがお知恵をお貸しください！！

  • 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 uiが動かない

    jquery uiが動きません。 何度も見直し、プログラムを書いてもどこがいけないかわかりません。 教えていただけたら幸いです。お願いいたします <html> <head> <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"> <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script> <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> </head> <body> <div id="box">box</div> <style> #box{ width:100px; height:100px; background:red; } </style> <script> $(function(){ $("#box").draggable( axis: 'x'; ); }); </script> </body> </html>

  • jqueryを２つ設置した事で片方が動かなくなる

    お世話になります かなり困っていますのでわかる方いらっしゃれば宜しくお願い致します 現在サイト内にjqueryを２つ設置しました ・一つは左グローバルメニューに伸縮するタイプのメニュー ・もう一つは画像をクリックするとポップアップの様になるスライドショー 少し自分で調べてみた所<script type=～></script> の書く順序によって片方が効いたり効かなかったりという所まではわかりました しかし、順序を変えても２つが共存する所まで行けません そもそも順序だけでは無いのでしょうか？ 以下を見てわかる方いらっしゃれば 是非お意見頂ければと思います 宜しくお願い致します 以下<head>内タグになります 今の状況だと左伸縮メニューは機能せず ポップアップスライドショーが機能しています <head> <!--左側伸縮メニュー--> <script type="text/javascript" src="./js/mootools-core.js"></script> <script type="text/javascript" src="./js/byslidemenu.js"></script> <script type="text/javascript"> window.onload = function(){ new BySlideMenu('verticalmenu', {vertical: true}); } </script> <!--//左側伸縮メニュー--> <!--ポップアップスライドショー--> <script type="text/javascript" src="./js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="./js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="./js/jquery.fancybox-1.2.1.pack.js"></script> <script type="text/javascript"> $(function() { $('a.large').fancybox(); }); </script> <!--//ポップアップスライドショー--> </head> かなり困っています 是非お力添えの程よろしくお願い致します

  • jQuery 動的にボタンが増えた時

    <html> <head> <title>js sample</title> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> jQuery(document).ready( function() { $(".button_cls_1").click(function(){ alert('hello world! button 1'); }); $(".button_cls_2").click(function(){ alert('hello world! button 2'); }); }); </script> </head> <body> <input class="button_cls_1" type="button" value="テスト１" /> <input class="button_cls_2" type="button" value="テスト２" /> </body> </html> 上記のようなスクリプトでbutton_cls_1、button_cls_2が動的に増えた時に どのように書いたらいいかわかりません。 button_cls_1、button_cls_2、button_cls_3、button_cls_4の時もあれば button_cls_1、button_cls_2の時もあります。

  • jqueryのscrollfollowが動かない

    jqueryのscrollfollowが他のスクリプトと衝突しているようで動きません。解決方法はありますか？ スライドショー用のスクリプトを記述すると、動かなくなります。 スライドショー用の記述を削除すると、scrollfollowはちゃんと機能してくれます。 おそらく、このスライドショーのスクリプトと衝突して動かなくなってるのだと 思いますが、解決方法はあるのでしょうか？ どたなか、よろしければお助けください。 以下が、現在のソースです。 （「※」マークのところがそのスクリプトの記述部分です） ----------------------------------------------------------- <!-- JS -->（※ここからがscrollfollowのスクリプトです。） <script type="text/javascript" src="jquery-1.5.1.min.js"></script> <script type="text/javascript" src="jquery.ui.core.js"></script> <script type="text/javascript" src="jquery.easing.1.3.js"></script> <script type="text/javascript" src="jquery.cookie.js"></script> <script type="text/javascript" src="jquery.scrollfollow.js"></script> <script type="text/javascript"> $( document ).ready( function (){ $('#sidebar1').scrollFollow({ speed: 500, killSwitch: 'sidebar12' }); }); </script> （※ここまでがscrollfollowのスクリプトです。） <script type="text/javascript" src="smoothscroll.js"></script> <script type="text/javascript" language="JavaScript"> <!-- function backToTop() { var x1 = x2 = x3 = 0; var y1 = y2 = y3 = 0; if (document.documentElement) { x1 = document.documentElement.scrollLeft || 0; y1 = document.documentElement.scrollTop || 0; } if (document.body) { x2 = document.body.scrollLeft || 0; y2 = document.body.scrollTop || 0; } x3 = window.scrollX || 0; y3 = window.scrollY || 0; var x = Math.max(x1, Math.max(x2, x3)); var y = Math.max(y1, Math.max(y2, y3)); window.scrollTo(Math.floor(x / 2), Math.floor(y / 2)); if (x > 0 || y > 0) { window.setTimeout("backToTop()", 25); } } //--> </script> （※画面一番上メインにスライドショーを設置していて、ここからがそのスクリプトです。 下記のスクリプトを削除するとscrollfollowは正常に機能してくれます。記述すると動きません。） <!--スライド--> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.panelgallery-2.0.0.js"></script> <script type="text/javascript"> $(function(){ $('.slideshow').panelGallery(); }); </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プラグイン、サーバー上だと動かない。

    こんにちは。 このたび制作している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

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する