人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

jQueryの質問です。
$(function() {
var url = "url.php";
var id = "#id-spc";
$.ajax({
url: url,
cache: false,
success: function(html){
$(id).html(html);
}
});

$('li.hide-tab').on({
"click": function(){
$(this).removeClass('hide-tab').addClass('now-tab');
$("li.now-tab").not(this).removeClass('now-tab').addClass('hide-tab');
var url2 = "url2.php";
$.ajax({
url: url2,
cache: false,
success: function(html){
$(id).html(html);
}
});
}
});
});
上記の内容はページ内の<li>をクリックすると、クリックされた<li>以外の背景を変えるということを実現させるつもりで書いたものですが、1回は切り替わりますが、now-tabからhide-tabに変わった<li class="hide-tab">をクリックしても<li class="now-tab">になりません。
どこに間違いがあるかご教授願います。
※ajaxによる内容変更は、テキトウな内容で今回の質問とは関係ありません。


●質問者: khaie
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● a-kuma3
●100ポイント ベストアンサー

jsFiddle で、質問にあるコードを試してみたのがこちらです。
https://jsfiddle.net/moqknvrv/

Ajax による内容変更は質問と関係ない、ということなので該当する部分をコメントアウトして、HTML と CSS を適当に書いてます。
期待通りに動いているんじゃないでしょうか。

実際にうまくいかないと悩んでいるコードと、質問に書いたコードは違っていると思いますが、

というようなあたりが、うまくいかない原因なのではないかと想像します。


khaieさんのコメント
エッセンスもなにもなくて、ここに載せたように機能を順に付け加えていく感じで作っています。 同じように、ajax部分をコメントアウトしてみました。 しかし初回はnow-tabとhide-tabが入れ替わっているのを確認できていますが、入れ替わったhide-tabをクリックしても×。jQueryは2.0.1から2.1.4に変更もしましたがダメ。。。 自作jsファイルを読みこまず、直接書き込んでみても同様です。 ちなみに、chrome、firefox、IE11いずれも動きません。

a-kuma3さんのコメント
jsFiddle に書いてみたやつは、やりたいような感じで動いてますよね? ちなみに、 >> 自作jsファイルを読みこまず、直接書き込んでみても同様です。 << というあたりが質問からは読み取れないのですが、どういうことですか?

khaieさんのコメント
jsfiddleでは期待通りに動いています。 jsを別ファイルにしてあったのですが、そこにバグがあるかもと思い、無効にしたという意味です。

a-kuma3さんのコメント
jsFiddle の方に書いたコードは、見てもらえれば分かりますが、質問のコード ほぼそのまんまです。 なので、質問に書いてなくて、実際のコードには存在している部分が、期待通りにならない原因だと思います。 とはいえ、何でしょうねえ。 LI 要素のクラスを挿げ替える以外に、スタイルをスクリプトでいじってたりしますか?

khaieさんのコメント
このページではjavascriptはこれだけで、現在共通ページで読み込んでいた自作jsファイルも無効にしています。jQuery2.1.4のみ有効になっています。 LIのクラスには、now-tab、hide-tab、invalid-tabの3種で、invalid-tabを割り振っているLIはただ文字列があるだけです。共通のメニューをPHPで書き出していますが、そこにはjavascriptはまったく絡んでいません。 ごく単純なことをやろうとしているだけなのですが・・・・

a-kuma3さんのコメント
ほんもののコードが提示できればデバッグできそうな気もしますが、そうもいかないですよね。 ブラウザを使ったデバッグは、どのくらいできますか? console とかは使えます? console.log を仕込んで、まずは、二回目のクリックで LI.hide-tab のイベントハンドラが呼ばれているかどうかを確認するところから切り分けてみてはどうでしょう。 >|javascript| $('li.hide-tab').on({ "click": function(){ console.log("li.hide-tab CLICKED !!!"); // ★これ $(this).removeClass('hide-tab').addClass('now-tab'); $("li.now-tab").not(this).removeClass('now-tab').addClass('hide-tab'); ... ||< -そもそも、イベントハンドラが呼ばれてない -イベントハンドラが呼ばれているのに、背景が変わらない --クラスをすげかえられてない --クラスはすげかわっているのに、背景が変わらない

khaieさんのコメント
alert()でやってみました。2回目はalertでませんでした。 console.logでも同じでした。。。

khaieさんのコメント
console.logでは"li.hide-tab CLICKED !!!"は元々クリックしたLI(たぶんthis)だけは複数回クリックすると数が増えているので、2回目以降はnow-tabをクリックしているのに、LI.hide-tab をクリックしていることになっています。 どういうことなのでしょうか。

a-kuma3さんのコメント
うーん、分からないなあ。 質問に書いたコードはきちんと動いているわけだから、実物がどうなってるのかが分からないと何とも (´・ω・`)

a-kuma3さんのコメント
>> LIのクラスには、デフォルト表示用にnow-tabをあらかじめ与えてありましたが、これがあると動かないようでした。 << ああ、なるほど。 click のイベントハンドラを定義しているのは li.hide-tab だけだから、最初に now-tab のタブをクリックしても反応がないと。 click のイベントハンドラは now-tab でも動くので、こんな風にしてみても。 >|javascript| $('li.hide-tab, li.now-tab').on({ // ★ここ "click": function(){ $(this).removeClass('hide-tab').addClass('now-tab'); $("li.now-tab").not(this).removeClass('now-tab').addClass('hide-tab'); ... ||<

khaieさんのコメント
終了後にありがとうございます。 最初に付してないと動かないというところが、内部動作的に理解できていませんが、今回の質問でひとつの知識となりました。

質問者から

自己解決というか、以下の内容で納得することにしました。
LIのクラスには、デフォルト表示用にnow-tabをあらかじめ与えてありましたが、これがあると動かないようでした。
LIすべてにクラス「hide-tab」を付し、デフォルト表示用に別途「default-tab」を付け、now-tabと同内容のCSS値とします。そしてclickのfunction内に以下を付け足しました。
$("li.default-tab").removeClass('default-tab');

https://jsfiddle.net/moqknvrv/41/

ということで、この質問に長くお付き合いいただいたa-kuma3にポイントを差し上げて終了したいと思います。


関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ