質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

ループ

ループとは、プログラミングにおいて、条件に合致している間、複数回繰り返し実行される箇所や、その制御構造を指します

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

394閲覧

jsで自動生成するli要素をクラスの有無で入れ子構造にしたい.

yuyauver98

総合スコア14

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

ループ

ループとは、プログラミングにおいて、条件に合致している間、複数回繰り返し実行される箇所や、その制御構造を指します

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2017/12/10 13:14

#実現したいこと
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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

解決いたしました。
条件分岐のやり方が間違っていました。

$(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 ($(this).hasClass('singleH2')) { $('.tosUl').append("<li onclick='singleScroll("+(a+1)+")' class='title2'>"+b+"</li>") } else { $('.tosUl').append("<li onclick='singleScroll("+(a+1)+")'>"+b+"</li>") } }) } })

投稿2017/12/11 12:15

yuyauver98

総合スコア14

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問