#実現したいこと
jsで自動生成するli要素をクラスの有無で入れ子構造にしたいです。
条件分岐の仕方がうまくいかないのでどなたかご教授願いたいです。よろしくお願いいたします!
#目次の自動生成の流れ
1:WordPress投稿画面で[@title1@][@/title1@],[@title2@][@/title2@]を使う
2:single.phpで[@title1@][@/title1@],[@title2@][@/title2@]を任意のhtmlに変換
3:main.jsで.scrollTitleが.borderLeftBottomクラスを持っているのか否かで条件分岐。
trueの場合は、そのままliを出力する。持っていない場合(.scrollTitle.singleH2)の時はli要素にtitle2クラスを付与して出力したいです。
#うまくいっていない箇所
b=$(".scrollTitle").eq(a).text();の後の条件分岐の仕方が間違っているのか目次のイメージ通りに出力されないです。。
#該当のコードを実行した際の現状の目次
目次(.tosTitle)
margin-leftが入る ●[@title2@][@/title2@]で囲ったテキスト(.tosUl li.title2)
margin-leftが入る ●[@title2@][@/title2@]で囲ったテキスト(.tosUl li.title2)
margin-leftが入る ●[@title2@][@/title2@]で囲ったテキスト(.tosUl li.title2)
margin-leftが入る ●[@title2@][@/title2@]で囲ったテキスト(.tosUl li.title2)
margin-leftが入る ●[@title2@][@/title2@]で囲ったテキスト(.tosUl li.title2)
margin-leftが入る ●[@title2@][@/title2@]で囲ったテキスト(.tosUl li.title2)
#目次のイメージです
目次(.tosTitle)
▷[@title1@][@/title1@]で囲ったテキスト(.tosUl li)
margin-leftが入る ●[@title2@][@/title2@]で囲ったテキスト(.tosUl li.title2)
margin-leftが入る ●[@title2@][@/title2@]で囲ったテキスト(.tosUl li.title2)
margin-leftが入る ●[@title2@][@/title2@]で囲ったテキスト(.tosUl li.title2)
▷[@title1@][@/title1@]で囲ったテキスト(.tosUl li)
margin-leftが入る ●[@title2@][@/title2@]で囲ったテキスト(.tosUl li.title2)
margin-leftが入る ●[@title2@][@/title2@]で囲ったテキスト(.tosUl li.title2)
margin-leftが入る ●[@title2@][@/title2@]で囲ったテキスト(.tosUl li.title2)
#該当のコード
●main.js
$(function(){ 'use strict'; if ($('.scrollTitle').length) { var b; $('.tosUl').css('display', 'block'); $(".scrollTitle").each(function(a){ $(".scrollTitle").eq(a).attr('id', 'scrollTitle'+(a+1)); b=$(".scrollTitle").eq(a).text(); if ($(".scrollTitle.borderLeftBottom").length) { $('.tosUl').append("<li onclick='singleScroll("+(a+1)+")'>"+b+"</li>") } else { $('.tosUl').append("<li onclick='singleScroll("+(a+1)+")' class='title2'>"+b+"</li>") } }) } }) function singleScroll(b) { 'use strict'; var a; if($(window).width()<960) { a=$("#scrollTitle"+b).offset().top-51 } else { a=$("#scrollTitle"+b).offset().top } $("html, body").animate( { scrollTop:a } ) }
●single.php
<ul class="tosUl"> <li class="tosTitle">目次</li> </ul> <?php $postItem = str_replace("[@text@]", "<p>", get_field('postItem')); $postItem = str_replace('[@/text@]', '</p>', $postItem); $postItem = str_replace('[@colorBold@]', '<span class="greenBold">', $postItem); $postItem = str_replace('[@/colorBold@]', '</span>', $postItem); $postItem = str_replace('[@title1@]', '<h2 class="borderLeftBottom scrollTitle">', $postItem); $postItem = str_replace('[@/title1@]', '</h2>', $postItem); $postItem = str_replace('[@title2@]', '<h2 class="singleH2 scrollTitle">', $postItem); $postItem = str_replace('[@/title2@]', '</h2>', $postItem); $postItem = str_replace('[@title3@]', '<h3 class="singleH3">', $postItem); $postItem = str_replace('[@/title3@]', '</h3>', $postItem); $postItem = str_replace('[@pickup@]', '<p class="pickupTitle"><i class="fa fa-sticky-note-o" aria-hidden="true"></i> ピックアップ記事</p> <div class="pickupContent">', $postItem); $postItem = str_replace('[@/pickup@]', '</div>', $postItem); echo $postItem; ?>
●single.css
.singleH2 { border-left: 6px solid #7CBFA3; margin-top: 20px; padding: 10px; } .tosUl { margin-bottom: 30px; padding: 10px; border: 1px solid #dedede; display: none; } .tosUl li { padding: 8px 0; -webkit-transition: .2s; transition: .2s; } .tosUl li:before { content: " ▶︎ "; color: rgba(140, 199, 175, 0.9); } .tosUl li:not(:first-child):hover { text-decoration: underline; cursor: pointer; } .title2 { margin-left: 16px; } .tosUl li.title2:before { content: "●"; } .tosTitle { padding: 0 0 10px 0 !important; border-bottom: 1px solid #dedede; } .tosTitle:before { content: "" !important; }
#前提情報
WordPress
カスタムフィールド $postItem
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。