• 締切済み

【jQuery基本質問】+（プラス）の使い方(2)

+(プラス)の使い方に関してルールを教えてほしいことがあります。 対象プログラムは、以下です。 $(function(){ $("ul.panel li:not("+$("ul.tab li a.selected").attr("href")+")").hide() この("+$("ul.tab li a.selected").attr("href")+")")の中で、+を使う理由がわかりません。 文字結合だと思うのですが、+がないと、not("URL")のようにならないのでしょうか？ +がなくてもnot("URL")は成立するように思うのですが、、、。 +の使い方、基本ルールについておしえてくださいませ。

みんなの回答

回答No.1

分けて書けばわかりますか？ var href=$("ul.tab li a.selected").attr("href"); var selector = "ul.panel li:not(" + href + ")"; $(selector).hide();

tetetemama
質問者

お礼

ありがとうございます！そもそもURLを吐き出す際に、+で囲むと覚えればいいんでしょうか。。"URL"について、どこをテキスト結合させるのか、、やはり意味が理解できないのです。。

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

関連するQ&A

  • jQueryのコードで分からない箇所があります

    プログラミング系の勉強を始めたばかりのど素人につき、間抜けな質問かと思いますが、 ご教授いただけますと幸いです。 ※ 以下今回の質問に関連するソースコード ■html <ul class="tab"> <li><a href="#tab1" class="selected">AAA</a></li> <li><a href="#tab2">BBB</a></li> <li><a href="#tab3">CCC</a></li> </ul> <ul class="panel"> <li id="tab1”>…(省略)…</li> <li id="tab2”>…(省略)…</li> <li id="tab3”>…(省略)…</li> </ul> ■jQuery $(function(){ $("ul.panel li:not("+$("ul.tab li a.selected").attr("href")+")").hide() }); ——————————————————— 上記のjQueryのコード内の $("ul.panel li:not("+$("ul.tab li a.selected").attr("href")+")") ↑箇所につきまして、なぜ+(プラス)が２箇所必要なのですか？ $("ul.panel li:not("$("ul.tab li a.selected").attr("href")")") もしくは $("ul.panel li:not($("ul.tab li a.selected").attr("href"))") のように記述するとどうしてエラーになるのでしょうか？ どうぞよろしくお願いいたします(>_<)

  • 前後の「＋」の意味は？

    タブパネルを作成する以下のコードで分からない個所があります。 実際のページは→（http://editors.ascii.jp/m-kobashigawa/jqsample/chapter03/04/v2/sample2.html） $(function(){ $("ul.panel li:not("+$("ul.tab li a.selected").attr("href")+")").hide(); $("ul.tab li a").click(function(){ $("ul.tab li a").removeClass("selected"); $(this).addClass("selected"); $("ul.panel li").hide(); $($(this).attr("href")).show(); return false; }); }); 分からないのは２行目の ("+$("ul.tab li a.selected").attr("href")+") です。 ＋（プラス）が前後に付いていますが、これがどういう意味なのか分かりません・・・ どうかご指南お願いいたします！

    • ベストアンサー
    • AJAX
  • jQuery tabs 開閉式タブについて

    jQuery tabsについて質問させてください。 知識不足です。。 やりたいこととしましては、複数タブメニューの開閉です。 メニュー１　クリックで⇒開く　⇒再度クリックで閉じる メニュー１開放時⇒メニュー２　クリック⇒メニュー２の内容に切り替わる⇒メニュー２再度クリックで閉じるといった内容です。 開閉だけなら　collapsible: true　で解決ですが、slideToggle　のような効果も付けたい。 単一のメニューの場合は　slideToggle　で一発ですが、複数になったらうまくいかない???? メニューの内容が同時に開いたりしてしまい。。などなど試行錯誤で行き詰まりました。 色々参考にして最終的には以下のようなところにきましたが、メニューを閉じる事ができず どなたかjQueryマスターの方ご教授いただけますと幸いです。 説明下手ですいません。 何卒よろしくお願いいたします。 ※以下のスクリプトにこだわりはございません。 こんなの一発でこうだろという指摘ございましたら遠慮くなく指摘してくださいませ。 javascript ================ <script type="text/javascript"> $(function(){ $("ul.panel li:not("+$("ul.tab li a.selected").attr("href")+")").hide() $("ul.tab li a").click(function(){ $("ul.tab li a").removeClass("selected") $(this).addClass("selected") $("ul.panel li").slideUp("fast") $($(this).attr("href")).slideDown("fast") return false }); }) </script> ///////HTML////// <body> <ul class="tab"> <li><a href="#tabs-1">メニュー１</a></li> <li><a href="#tabs-2">メニュー２</a></li> <li><a href="#tabs-3">メニュー３</a></li> </ul> <ul class="panel"> <li id="tabs-1"></li> <li id="tabs-2"></li> <li id="tabs-3"></li> </ul> </body>

  • jqueryの質問です

    jqueryで .tes01と.tes02は同じ番目をセットと考え .tes01 の画像をクリックした時に .tes02のリンクをクリックした状態にしたいと思っています。 .tes02のURLの取得は出来たのですがそれ以降が出来ないので教えてもらえますでしょうか。 $(function(){ $("ul.tes01 li").click(function(){ var tes01li = $(this).index(); var tes02li = $(".tes02 li").find("a").eq(tes01li).attr("href"); tes02li.click(); }); }); <ul class="tes01"> <li><img src="img01"></li> <li><img src="img02"></li> <li><img src="img03"></li> <li><img src="img04"></li> </ul> <ul class="tes02"> <li><a href="#link01">link01</a></li> <li><a href="#link02">link02</a></li> <li><a href="#link03">link03</a></li> <li><a href="#link04">link04</a></li> </ul>

  • jqueryの質問。

    毎回、お世話になります。 jqueryを使ってリンク文字をクリックすると画像が変更できるようにしたいのですが、 上手くいきません。 <HTML> <body> <ul> <li><a href="DSC_0014.jpg">a</a></li> <li><a href="kamen.jpg">b</a></li> <li><a href="irumi.jpg">c</a></li> </ul> <p><img src="DSC_0014.jpg" width="1000" height="671"> <SCRIPT> $(function(){ ("a:eq(0)").click(function(){ $("img").attr("src","DSC_0014.jpg").attr("alt","人物"); return false }); $("a:eq(1)").click(function(){ $("img").attr("src","kamen.jpg").attr("alt","仮面"); return false }); $("a:eq(2)").click(function(){ $("img").attr("src","irumi.jpg").attr("alt","イルミ"); return false }); }); このコードだとリストa,b,cをクリックすると別ページに画像が表示されます。 その場での画像切り替えをしたいのですが、どこが間違っているのでしょうか? 宜しくお願い致します。

  • 画像を使用したタブを複数設置

    下記、サイトを参考にタブ切り替え式のjQueryを設置しました。 http://web.showjin.me/2011/05/jquery_tab_image.html これを同じファイル内に複数設置したく 同じscriptをjsファイルに3つコピーし 設置しましたが、エラーで動かなくなったので 各、ul.btn_tab li aのtab部分tab01、tab02、tab03とし、 .container_tabをcontainer_tab01～03、 a.selectedをa.selected01～03と それぞれ変更してみました。 上記の方法で動作は実現できたのですが、 これをもっとスマートなscriptにする方法があればご教授頂けないでしょうか。 どうぞ宜しくお願い致します。 id、classを修正し、以下を3パターン設置しています。 javascript ================ /* クリックしたときに出る点線を防ぐ（IE対策）*/ $(function(){ $("ul.btn_tab li a").focus(function(){ $(this).blur(); }); }) /* タブボタンのon/offとタブの内容を切り替える */ $(function(){ /* 初期設定 */ $("a.selected img").attr("src",$("a.selected img").attr("src").replace(/^(.+)(\.[a-z]+)$/,"$1_on$2")); $(".container_tab div:not("+$("ul.btn_tab li a.selected").attr("href")+")").hide(); /* クリック時の処理 */ $("ul.btn_tab li a").click(function(){ // 今のul.btn_tab li a.selectedのhrefの値を保持しておく var name1=$("ul.btn_tab li a.selected").attr("href"); $("a.selected img").attr("src",$("a.selected img").attr("src").replace(/^(.+)_on(\.[a-z]+)$/,"$1$2")); $("ul.btn_tab li a").removeClass("selected"); $(this).addClass("selected"); /* クリックした画像はmouseoverで_onが付けられているので、そのままだと_on_onとなり、画像へのパスが通らなくなる。 なので、今付いている_onをいったん削除してから再度_onを付け直す */ $("img",this).attr("src",$("img",this).attr("src").replace(/^(.+)_on(\.[a-z]+)$/,"$1$2")); $("img",this).attr("src",$("img",this).attr("src").replace(/^(.+)(\.[a-z]+)$/,"$1_on$2")); // 保持しておいたhrefの値のdivの内容がフェードアウトしたら、クリックされたボタンのhrefの値のdivの内容をフェードインする $(name1).fadeOut(500,function(){ // クリックされたul.btn_tab li a.selectedのhrefの値を保持 var name2=$("ul.btn_tab li a.selected").attr("href"); $(name2).fadeIn(500); }); return false; }) }) /* マウスオーバー時の処理 */ $(function(){ $("ul.btn_tab a").mouseover(function(){ /* セレクタがついているかどうかの条件判断はマウスオーバーとマウスアウトのそれぞれに対して設定する。 マウスオーバー時だけだと、クリックした後、マウスアウトするときに_onが外されて通常時の画像になってしまうため */ var className = $(this).attr('class'); if(className!='selected'){ $("img",this).attr("src",$("img",this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1_on$2")) } }).mouseout(function(){ var className2 = $(this).attr('class'); if(className2!='selected'){ $("img",this).attr("src",$("img",this).attr("src").replace(/^(.+)_on(\.[a-z]+)$/,"$1$2")) } }) })

  • Jquery タブで、４つのliのうち、ひとつだけ除外

    お世話になります。あともう少しのところでうまくいきません！ http://papermashup.com/demos/jquery-tabs/ 上記を使ってタブをやっています 【html】 <div id="test"> <ul> <li class="menu01"><a href="#tab-1">タブ１</a></li> <li class="menu02"><a href="#tab-2">タブ2</a></li> <li class="menu03"><a href="#tab-3">タブ3</a></li> <li class="menu04"><a href="/test/">こいつだけ違うページへ</a></li> </ul> <div id="tab-1">タブ1の中身</div> <div id="tab-2">タブ2の中身</div> <div id="tab-3">タブ3の中身</div> </div> 【Jquery】 <script type="text/javascript"> $(document).ready(function(){ $('#topserch div').hide(); $('#topserch div:first').show(); $('#topserch ul li:first').addClass('active'); $('#topserch ul li a').click(function(){ $('#topserch ul li').removeClass('active'); $(this).parent().addClass('active'); var currentTab = $(this).attr('href'); $('#topserch div').hide(); $(currentTab).show(); return false; }); }); </script> まずこのままだ４つ目のリンクはまったく動きません。 そこで、return false;を取ると、当然変な動きになります。 <li class="menu04"><a href="/test/">こいつだけ違うページへ</a></li> をクリックした時だけ、普通に別のページにジャンプさせるにはどうしたらよいのでしょうか？

  • jQueryを使用したタブの改造

    jQueryの知識が殆どないので教えてください。 以下のページで公開されているタブを改造して利用したいと考えています。 http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/ ▼スクリプト部分 $(document).ready(function() { //When page loads... $(".tab_content").hide(); //Hide all content $("ul.tabs li:first").addClass("active").show(); //Activate first tab $(".tab_content:first").show(); //Show first tab content //On Click Event $("ul.tabs li").click(function() { $("ul.tabs li").removeClass("active"); //Remove any "active" class $(this).addClass("active"); //Add "active" class to selected tab $(".tab_content").hide(); //Hide all tab content var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content $(activeTab).fadeIn(); //Fade in the active ID content return false; }); }); ▼HTML部分 <ul class="tabs"> <li><a href="#tab1">Gallery</a></li> <li><a href="#tab2">Submit</a></li> </ul> <div class="tab_container"> <div id="tab1" class="tab_content"> <!--Content--> </div> <div id="tab2" class="tab_content"> <!--Content--> </div> </div> タブをクリックして切り替えるというシンプルなスクリプトなのですが、 1、クリックではなくマウスオーバーでタブを切り替え。 2、アクティブなタブを判別するための要素（？）を「href」ではなく「name」に変更したいと考えています。 自分なりに調べて .click(function() ～の部分を　.hover(function() に、 attr("href")の部分をattr("name")（＋HTMLのhref部分も変更）に 変更することでほぼ理想通りの動作をするようになりました。 ただ、このコードの動作で少し問題が発生しています 1つはカーソルを素早く滑らせて切り替えを行うと、本来は隠れているべきアクティブなタブ以外のタブ要素が全て表示されることがあるという点。 2つはHTMLのname部分を「name="#tab1"」というHTML的にはおかしな記載をしないといけないという点です。できれば「name="tab1"」という記載の仕方で動作できればと思います。 解決方法があれば教えてくだささい。 よろしくお願いいたします。

  • JQueryを使ってcssを書き換え

    何となくコードを見てさわる程度の初心者です。 以下のようなソースを組みました。 <div id="slide"> <a href="01.htm"><img src="01.jpg" alt="01" id="alttxt" /></a> </div> <div id="slidenavi"> <ul> <li><a href="01.html"><img src="s_01.jpg" alt="01" class="b_01.jpg" /></a><span class="active"></span></li> <li><a href="02.htm"><img src="s_02.jpg" alt="02" class="b_02.jpg" /></a><span class="active"></span></li> <li><a href="03.html"><img src="s_03.jpg" alt="03" class="b_03.jpg" /></a><span class="active"></span></li> </ul> </div> #slideがメインエリアで、#slidenaviがメインエリアの画像とリンク先を切り替えるナビゲーションボタンになっています。 ナビに連動したメインエリア用の画像ファイル名は #slidenavi の img の classに入れておいて、それを読み込んで代入するというおかしなやり方で呼び出していますが、ここまではうまくいきました。 問題はここからです。 最初の状態では<span class="active"></span>はcssの設定でdisplay: noneとしてあります。 そして#slidenaviのボタンにマウスが乗ると、その部分の<span class="active"></span>をdisplay: blockとして表示したいのですが、これがどうしてもうまくいきません。 この部分も含めて、おかしな書き方になっている部分があれば教えてもらえないでしょうか。 jsファイルは以下の通りです。 $(function(){ $('#slidenavi ul li a').fadeTo(0,0.4); $('#slidenavi ul li a').hover(function(){ $(this).fadeTo(300,1.0); }, function(){ $(this).fadeTo(300,0.4); }) $('#slidenavi ul li img').mouseover(function(){ var bglink = $(this).attr("class"); var altTxt = $(this).attr("alt"); $("#slide img").attr("src","images/home/main/"+bglink); $("#slide img").attr("alt",altTxt); $("#slide span.active").css("display","block"); }); $('#slidenavi ul li a').mouseover(function(){ var Href = $(this).attr('href'); var Tget = $(this).attr('target'); $("#slide a").attr("href", Href); $("#slide a").attr("target", Tget); $("#slide a").click(function() { window.open(Href,'_self'); return false; }); }); });

  • jQuery プルダウンメニュー

    プルダウンメニューの一部で行き詰っています。 メニュー１のサブメニューが開いている状態で、メニュー２をクリックした時 メニュー１のサブメニューが閉じるようにする(その逆パターンも含む)。 サブメニューにカーソルがある時、メニューはhoverさせないようにする。 ▼html----------------------------------------- <ul id="gNav"> <li>メニュー1 <ul> <li><a href="">サブメニュー1-1</a></li> </ul> </li> <li>メニュー2 <ul> <li><a href="">サブメニュー2-1</a></li> <li>サブメニュー2-2 <ul> <li><a href="">サブメニュー2-2-1</a></li> <li><a href="">サブメニュー2-2-2</a></li> <li><a href="">サブメニュー2-2-3</a></li> </ul> </li> </ul> </li> <li><a href="">メニュー3</a></li> </ul> ▼jQuery----------------------------------------- $(function(){ $("#gNav > li").click(function(){ $(this).children("ul").toggle(); }); $("#gNav > li > ul > li").mouseenter(function(){ $(this).children("ul").show(); }).mouseleave(function(){ $(this).children("ul").hide(); }); $("#gNav > li").hover(function(){ $(this).css("background-color","#ff9900"); },function(){ $(this).css("background-color","#ffcc00"); }); $("#gNav > li > ul > li").hover(function(){ $(this).css("background-color","#99cc66"); },function(){ $(this).css("background-color","#669933"); }); $("#gNav > li > ul >li > ul >li").hover(function(){ $(this).css("background-color","#dddddd"); },function(){ $(this).css("background-color","#eeeeee"); }); }); 宜しくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する