Q&A
HTMLを追記すると回答が得られやすくなると思います。
HTMLが反応しないのでエスケープシークエンスが問題になるのかと思いますが、
調べてもイマイチわかりません。
font-awesomeを使用しています。
ちなみにこれは、サイドバーが開いたり閉じたりするやつです。
JavaScript
1jQuery(function(){ 2 // ボタンサイドバー 3 var duration = 300; 4 var $aside = $('#sidebar'); 5 var $asidButton = $aside.find('button') 6 .on('click', function(){ 7 $aside.toggleClass('open'); 8 if($aside.hasClass('open')){ 9 $aside.stop(true).animate({right: '-20%'}, duration); 10 $asidButton.text('<i class="fa fa-arrow-circle-left" aria-hidden="true"></i>'); 11 }else{ 12 $aside.stop(true).animate({right: '-41%'}, duration); 13 $asidButton.text('<i class="fa fa-arrow-circle-right" aria-hidden="true"></i>')}; 14 }); 15});
最後の
$asidButton.text('<i class="fa fa-arrow-circle-left" aria-hidden="true"></i>');
と
$asidButton.text('<i class="fa fa-arrow-circle-right" aria-hidden="true"></i>')};
が問題になっています。
―――――――――――――――――――――――――――――――――――――――
wordpressなので、sidebar.phpに書いています。
php
1 </div><!-- main --> 2 </main> 3 <aside> 4 <div id="sidebar" class="md-4"> 5 <?php if ( is_active_sidebar( 'sidebar' ) ) : 6 dynamic_sidebar( 'sidebar' ); 7 endif; ?> 8 <button><i class="fa fa-arrow-circle-left" aria-hidden="true"></i></button> 9 </div><!-- sidebar --> 10 </aside>
下にソースで表示したものを書きます。
html
1 <div id="sidebar" class="md-4"> 2 <div class="widget"> 3<form method="get" class="searchform" action="http://127.0.0.1:4001/wordpress/"> 4 <input type="text" placeholder="search" value="" name="s" class="s"> 5 <input type="submit" class="searchsubmit" value="S"> 6</form></div> <div class="widget"> <p class="bold">最近の投稿</p> <ul> 7 <li> 8 <a href="http://127.0.0.1:4001/wordpress/archives/472">472</a> 9 </li> 10 <li> 11 <a href="http://127.0.0.1:4001/wordpress/archives/466">aaaaaaaaa</a> 12 </li> 13 <li> 14 <a href="http://127.0.0.1:4001/wordpress/archives/464">hhhhh</a> 15 </li> 16 <li> 17 <a href="http://127.0.0.1:4001/wordpress/archives/462">aaaaaaaaa</a> 18 </li> 19 <li> 20 <a href="http://127.0.0.1:4001/wordpress/archives/460">test</a> 21 </li> 22 </ul> 23 </div> <div class="widget"><p class="bold">最近のコメント</p><ul id="recentcomments"><li class="recentcomments"><a href="http://127.0.0.1:4001/wordpress/archives/45#comment-19">A Post With Everything In It</a> に <span class="comment-author-link">admin</span> より</li><li class="recentcomments"><a href="http://127.0.0.1:4001/wordpress/archives/1#comment-1">Hello world!</a> に <span class="comment-author-link"><a href='http://wordpress.org/' rel='external nofollow' class='url'>Mr WordPress</a></span> より</li><li class="recentcomments"><a href="http://127.0.0.1:4001/wordpress/archives/57#comment-15">Another Post with Everything In It</a> に <span class="comment-author-link"><a href='http://wpcandy.com' rel='external nofollow' class='url'>Dan Philibin</a></span> より</li><li class="recentcomments"><a href="http://127.0.0.1:4001/wordpress/archives/45#comment-11">A Post With Everything In It</a> に <span class="comment-author-link"><a href='http://wpcandy.com' rel='external nofollow' class='url'>Dan Philibin</a></span> より</li><li class="recentcomments"><a href="http://127.0.0.1:4001/wordpress/archives/43#comment-9">Quotes Time!</a> に <span class="comment-author-link"><a href='http://wpcandy.com' rel='external nofollow' class='url'>Dan Philibin</a></span> より</li></ul></div><div class="widget"><p class="bold">アーカイブ</p> <ul> 24 <li><a href='http://127.0.0.1:4001/wordpress/archives/date/2017/03'>2017年3月</a></li> 25 <li><a href='http://127.0.0.1:4001/wordpress/archives/date/2017/02'>2017年2月</a></li> 26 <li><a href='http://127.0.0.1:4001/wordpress/archives/date/2017/01'>2017年1月</a></li> 27 <li><a href='http://127.0.0.1:4001/wordpress/archives/date/2016/12'>2016年12月</a></li> 28 <li><a href='http://127.0.0.1:4001/wordpress/archives/date/2012/10'>2012年10月</a></li> 29 <li><a href='http://127.0.0.1:4001/wordpress/archives/date/2008/09'>2008年9月</a></li> 30 <li><a href='http://127.0.0.1:4001/wordpress/archives/date/2008/08'>2008年8月</a></li> 31 </ul> 32 </div><div class="widget"><p class="bold">メタ情報</p> <ul> 33 <li><a href="http://127.0.0.1:4001/wordpress/wp-admin/">サイト管理</a></li> <li><a href="http://127.0.0.1:4001/wordpress/wp-login.php?action=logout&_wpnonce=446c57c3ad">ログアウト</a></li> 34 <li><a href="http://127.0.0.1:4001/wordpress/feed">投稿の <abbr title="Really Simple Syndication">RSS</abbr></a></li> 35 <li><a href="http://127.0.0.1:4001/wordpress/comments/feed">コメントの <abbr title="Really Simple Syndication">RSS</abbr></a></li> 36 <li><a href="https://ja.wordpress.org/" title="Powered by WordPress, state-of-the-art semantic personal publishing platform.">WordPress.org</a></li> </ul> 37 </div> <button><i class="fa fa-arrow-circle-left" aria-hidden="true"></i></button> 38 </div><!-- sidebar -->
最後の<button>です。
―――――――――――――――――――――――――――――――――――――
すみません。
投稿フォームなのですが、こちらはどうすればいいでしょうか？
html
1<?php $form = ' 2<form method="get" class="searchform" action="' . esc_url( home_url( '/' ) ) . '"> 3 <input type="text" placeholder="search" value="" name="s" class="s"> 4 <input type="submit" class="searchsubmit" value="<i class="fa fa-search" aria-hidden="true"></i>"> 5</form>'; 6echo $form; ?>
最後の
<input type="submit" class="searchsubmit" value="<i class="fa fa-search" aria-hidden="true"></i>">に悩んでいます。
回答2件
0
ベストアンサー
text関数ではなく、html関数を使用することで質問者さんの実現したいことが行えると思います。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>タイトル</title> 6 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 7</head> 8<body> 9<div id="sidebar" class="md-4"> 10 <div class="widget"> 11 <form method="get" class="searchform" action="http://127.0.0.1:4001/wordpress/"> 12 <input type="text" placeholder="search" value="" name="s" class="s"> 13 <input type="submit" class="searchsubmit" value="S"> 14 </form> 15 </div> 16 <div class="widget"><p class="bold">最近の投稿</p> 17 <ul> 18 <li> 19 <a href="http://127.0.0.1:4001/wordpress/archives/472">472</a> 20 </li> 21 <li> 22 <a href="http://127.0.0.1:4001/wordpress/archives/466">aaaaaaaaa</a> 23 </li> 24 <li> 25 <a href="http://127.0.0.1:4001/wordpress/archives/464">hhhhh</a> 26 </li> 27 <li> 28 <a href="http://127.0.0.1:4001/wordpress/archives/462">aaaaaaaaa</a> 29 </li> 30 <li> 31 <a href="http://127.0.0.1:4001/wordpress/archives/460">test</a> 32 </li> 33 </ul> 34 </div> 35 <div class="widget"><p class="bold">最近のコメント</p> 36 <ul id="recentcomments"> 37 <li class="recentcomments"><a href="http://127.0.0.1:4001/wordpress/archives/45#comment-19">A Post With 38 Everything In It</a> に <span class="comment-author-link">admin</span> より 39 </li> 40 <li class="recentcomments"><a href="http://127.0.0.1:4001/wordpress/archives/1#comment-1">Hello world!</a> に 41 <span class="comment-author-link"><a href='http://wordpress.org/' rel='external nofollow' class='url'>Mr WordPress</a></span> 42 より 43 </li> 44 <li class="recentcomments"><a href="http://127.0.0.1:4001/wordpress/archives/57#comment-15">Another Post 45 with Everything In It</a> に <span class="comment-author-link"><a href='http://wpcandy.com' 46 rel='external nofollow' class='url'>Dan Philibin</a></span> 47 より 48 </li> 49 <li class="recentcomments"><a href="http://127.0.0.1:4001/wordpress/archives/45#comment-11">A Post With 50 Everything In It</a> に <span class="comment-author-link"><a href='http://wpcandy.com' 51 rel='external nofollow' class='url'>Dan Philibin</a></span> 52 より 53 </li> 54 <li class="recentcomments"><a href="http://127.0.0.1:4001/wordpress/archives/43#comment-9">Quotes Time!</a> 55 に <span class="comment-author-link"><a href='http://wpcandy.com' rel='external nofollow' class='url'>Dan Philibin</a></span> 56 より 57 </li> 58 </ul> 59 </div> 60 <div class="widget"><p class="bold">アーカイブ</p> 61 <ul> 62 <li><a href='http://127.0.0.1:4001/wordpress/archives/date/2017/03'>2017年3月</a></li> 63 <li><a href='http://127.0.0.1:4001/wordpress/archives/date/2017/02'>2017年2月</a></li> 64 <li><a href='http://127.0.0.1:4001/wordpress/archives/date/2017/01'>2017年1月</a></li> 65 <li><a href='http://127.0.0.1:4001/wordpress/archives/date/2016/12'>2016年12月</a></li> 66 <li><a href='http://127.0.0.1:4001/wordpress/archives/date/2012/10'>2012年10月</a></li> 67 <li><a href='http://127.0.0.1:4001/wordpress/archives/date/2008/09'>2008年9月</a></li> 68 <li><a href='http://127.0.0.1:4001/wordpress/archives/date/2008/08'>2008年8月</a></li> 69 </ul> 70 </div> 71 <div class="widget"><p class="bold">メタ情報</p> 72 <ul> 73 <li><a href="http://127.0.0.1:4001/wordpress/wp-admin/">サイト管理</a></li> 74 <li><a href="http://127.0.0.1:4001/wordpress/wp-login.php?action=logout&_wpnonce=446c57c3ad">ログアウト</a> 75 </li> 76 <li><a href="http://127.0.0.1:4001/wordpress/feed">投稿の <abbr 77 title="Really Simple Syndication">RSS</abbr></a></li> 78 <li><a href="http://127.0.0.1:4001/wordpress/comments/feed">コメントの <abbr title="Really Simple Syndication">RSS</abbr></a> 79 </li> 80 <li><a href="https://ja.wordpress.org/" 81 title="Powered by WordPress, state-of-the-art semantic personal publishing platform.">WordPress.org</a> 82 </li> 83 </ul> 84 </div> 85 <button><i class="fa fa-arrow-circle-left" aria-hidden="true"></i></button> 86</div><!-- sidebar --> 87<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 88<script> 89 jQuery(function () { 90 // ボタンサイドバー 91 var duration = 300; 92 var $aside = $('#sidebar'); 93 var $asidButton = $aside.find('button') 94 .on('click', function () { 95 $aside.toggleClass('open'); 96 if ($aside.hasClass('open')) { 97 $aside.stop(true).animate({right: '-20%'}, duration); 98 $asidButton.html('<i class="fa fa-arrow-circle-left" aria-hidden="true"></i>'); 99 } else { 100 $aside.stop(true).animate({right: '-41%'}, duration); 101 $asidButton.html('<i class="fa fa-arrow-circle-right" aria-hidden="true"></i>') 102 } 103 }); 104 }); 105</script> 106</body> 107</html>
投稿2017/04/02 07:34
総合スコア14731
回答を頂いてありがとうございます。
申し訳ないのですが、これはタグではなくて要素を変えるようにした方がスピード的にもユーザビリティになりますか？
さっき思いついて、、。
タグを変えても要素ごと変えてもあまり意味がないように感じるのですが...
あ…、
わかりました。
ありがとうございます。
サイドバーはお陰さまで出来ました。
ありがとうございます。
投稿フォームもアドバイスをお願いします。
質問の追記をされたようですが、問題は解決しなかったということでしょうか？もしそうならば、実現したいことをもう少し具体的に追記していただけませんか？
すみません。
別に立てます。
ありがとうございました。
あなたの回答
tips
プレビュー
