Q&A
htmlコードとjqueryコードの部分を、それぞれ``` ```と囲んで、マークアップ記法で読みやすくしましょう。
201.html～223.htmlまでの外部htmlを、読み込んで、link_list のリストを、クリックするとポップアップするようにしたいのですが、下記のソースだと、配列の値が200.htmlから始まってしまうので、「クリック1」からは表示できるのですが、「クリック0」は200.htmlがないので表示出来ません…。。。。
「クリック0」は不要で「クリック1」～「クリック23」をクリックすると、それぞれ「201.html」～「223.html」が表示されるようにしたいのですが…。。。
201.htmlから始まるようにするには、どのように変更すればよろしいでしょうか。
基本的なことですみませんが、調べてもわからないので…よろしくお願いします。
html------------------------------------------------------
<body>
<div class="container">
<ul class="link_list">
<li>クリック0</li>
<li>クリック1</li>
<li>クリック2</li>
<li>クリック3</li>
</ul>
<div class="box">
<div class="box_inner">
<ul class="box_load">
</ul>
<div class="close">
閉じる
</div>
<ul class="arrows">
<li class="arrow_left"><span class="arrow_span">←</span></li>
<li class="arrow_rigth"><span class="arrow_span">→</span></li>
</ul>
</div>
</div>
<div class="box_cover">
</div>
</div>
jquery----------------------------------------------------------
$(function(){
var box =$('.box'),
link = $('.link_list li '),
box_cover = $('.box_cover'),
close=$('.close'),
box_load = $('.box_load'),
box_load_li = $('.box_load>li'),
arrow_left =$('.arrow_left>.arrow_span'),
arrow_rigth =$('.arrow_rigth>.arrow_span');
</html>var all_link=new Array(), links = $('.link_list').find('li'), dr='<?php echo get_template_directory_uri(); ?>'; for(var i=0;i<links.length;i++){ all_link[i]='20'+i+'.html'; box_load.append('<li class="load_'+i+'"></li>'); $('.load_'+i).load(all_link[i]); } $('.box_load>li').hide(); link.on('click',function(){ var li_index =link.index(this); $('.box_load>li').removeClass('active'); $('.load_'+li_index).addClass('active'); $('.box_load>li').hide(); $('.box_load >li.active').show(); if(box.hasClass('active')){ box.removeClass('active'); box_cover.removeClass('active'); close.removeClass('active'); $('.box_load>li').removeClass('active'); }else{ // もしないなら box.addClass('active'); box_cover.addClass('active'); close.addClass('active'); } }); box_cover.on('click',function(){ box.removeClass('active'); box_cover.removeClass('active'); close.removeClass('active'); $('.box_load>li').removeClass('active'); }); close.on('click',function(){ box.removeClass('active'); box_cover.removeClass('active'); close.removeClass('active'); $('.box_load>li').removeClass('active'); }); var fade_speed = 300; arrow_rigth.on('click',function(){ var load_active = $('.box_load >li.active'), right = load_active.next('li').length?load_active.next('li'):$('.box_load >li:first'); $('.box_load >li.active').fadeOut(fade_speed).removeClass('active'); right.fadeIn(fade_speed).addClass('active'); }); arrow_left.on('click',function(){ var load_active = $('.box_load >li.active'), left = load_active.prev('li').length?load_active.prev('li'):$('.box_load >li:last'); $('.box_load >li.active').fadeOut(fade_speed).removeClass('active'); left.fadeIn(fade_speed).addClass('active'); }); }); </script>
回答1件
0
ベストアンサー
まずは、1点確認です。
ul class="link_list"> <li>クリック0</li> <li>クリック1</li> <li>クリック2</li> <li>クリック3</li> </ul>
の部分は、実際は、0～23まである認識で良いですかね？
その前提で、意見させていただきますね
①html内のlink_listをクリック1～23にする。
②jQuery内でhtmlリンク作成部分で、i+201のhtmlを指定する
※そもそも'20'+iでやっちゃったら、201～2023ですよね？誤りと考え、修正してます。
for(var i=0;i<links.length;i++){ all_link[i]=(i+201)+'.html'; box_load.append('<li class="load_'+i+'"></li>'); $('.load_'+i).load(all_link[i]); }
【概要解説】
■①の対応
表示するクリックのリストを1～23にします。
これで0が表示されなくなるはずです。
■②の対応
link_listが、①の対応にてクリック1～23になったことにより
配列[0]にクリック1が入っています。
そのため配列アクセスにiを用い、
html名称作成にはi+201を用いることで、
配列[0]にはクリック1と201.htmlの紐付けを
配列[1]にはクリック2と202.htmlの紐付けを
...
という形で、リンク作成をおこないます。
投稿2021/01/30 14:02
総合スコア404
出来ました！ありがとうございます。
解説よく読んでみましたが、まだいまいち理解出来ていませんが、プログラムよく見てみます。
あと、リストが23まである部分、説明不足ですみませんでした。うまく書けなくてわかり難いところもあったかと思いますが、丁寧に回答して頂き感謝いたします。
解決されたようで、良かったです。
初心者の方にありがちなのですが、
コメント(日本語説明)が少ないので、
1行ずつコメントを書くともう少しプログラムが理解しやいですよ。
あなたの回答
tips
プレビュー
