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

人力検索はてな

ﾓﾊﾞｲﾙ版を表示しています｡PC版はこちら

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 を適当に書いてます｡
期待通りに動いているんじゃないでしょうか｡

実際にうまくいかないと悩んでいるｺｰﾄﾞと､質問に書いたｺｰﾄﾞは違っていると思いますが､

ｴｯｾﾝｽを取り出したつもりが､うまくいかない原因まで取り除いてしまった
関係ないと思っている Ajax から内容変更の部分が影響している
使ってるjQuery のﾊﾞｰｼﾞｮﾝが古い

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

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にﾎﾟｲﾝﾄを差し上げて終了したいと思います｡