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

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

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

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

Q&A

解決済

3回答

1736閲覧

下記JSは、このように訂正する必要がありますか?

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

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

0グッド

0クリップ

投稿2016/02/09 02:18

下記JSは、このように訂正する必要がありますか?
その場合なぜ""が必要なのでしょう?#も文字列ということでしょうか?
初心者でもわかるようにお願いします。

・$('a[href^=#]').click(function() {

$('a[href^="#"]').click(function() {

<!-- ページ内遷移 --> <script> $(function(){ // #で始まるアンカーすべてをクリックした場合に処理 $('a[href^=#]').click(function() { // スクロールの速度 var speed = 1000; // ミリ秒 // アンカーの値取得 var href= $(this).attr("href"); // 移動先を取得 var target = $(href == "#" || href == "" ? 'html' : href); // 移動先を数値で取得 var position = target.offset().top; // スムーススクロール $('body,html').animate({scrollTop:position}, speed, 'swing'); return false; }); }); </script>

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

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

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

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

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

guest

回答3

0

ベストアンサー

jQuery API Documentation には "value: An attribute value. Can be either an unquoted single word or a quoted string." とあります。
"unquoted single word" もしくは "quoted string" であれば値として指定可能ということですね。
"unquoted single word" として使用可能な文字種については言及がありませんが、jQuery は内部的に CSS の Selectors API を利用しています。

Selectors API Level 4 では「属性値に照合される val は、 <ident-token> または <string-token> として与えられなければならない」とあります。

CSS Syntax Module Level 3 の <ident-token> を見ると、# が含まれないので「a[href^=#]SyntaxError になるのが正しい仕様」といえます。
結論としては、a[href^="#"] または a[href^='#'] を指定すればいいでしょう。

Re: webpage さん

投稿2016/02/09 04:58

編集2016/02/09 05:30
think49

総合スコア18156

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

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

退会済みユーザー

退会済みユーザー

2016/02/09 05:22

うーん難しいですね。 ありがとうございます。 お三方ともBAにしたいですね。
guest

0

訂正の必要はないです。

HTML側にhref属性に設定したものと一致したidが振られたコンテンツがあれば、その位置までスクロールするはずです。

投稿2016/02/09 04:04

yamato_hikawa

総合スコア2092

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

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

退会済みユーザー

退会済みユーザー

2016/02/09 04:06

だから問題なく動いていたのですね。
退会済みユーザー

退会済みユーザー

2016/02/09 05:22

ありがとうございます。 お三方ともBAにしたいですね。
guest

0

Javascriptというより、JQueryのセレクタの書き方の問題ですね。
これは「JQueryの仕様としてそう決まっている」ということです。

http://api.jquery.com/attribute-starts-with-selector/

Attribute Starts With Selector [name^=”value”]

このようにvalueはコーテーションで囲む必要があると明記されています。

'[アトリビュート名^="値"]' または
"[アトリビュート名^='値']" と書く必要があります。

Javascriptでは文字列はシングルコーテーションかダブルコーテーションで囲むことになっていますので、途中で文字列が切れないように、シングルコーテーションかダブルコーテーションを選ぶことになります。

もし、"[アトリビュート名^="値"]" とすると、
"[アトリビュート名^=" "]" という三つの要素に分かれてしまう、ということです。当然エラーになります。

投稿2016/02/09 03:48

編集2016/02/09 03:52
shi_ue

総合スコア4437

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

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

退会済みユーザー

退会済みユーザー

2016/02/09 04:02

ありがとうございます。 下記で正しいのですね。 <script> $(function(){ // #で始まるアンカーすべてをクリックした場合に処理 $("a[href^='#']").click(function() { // スクロールの速度 var speed = 1000; // ミリ秒 // アンカーの値取得 var href= $(this).attr("href"); // 移動先を取得 var target = $(href == "#" || href == "" ? 'html' : href); // 移動先を数値で取得 var position = target.offset().top; // スムーススクロール $('body,html').animate({scrollTop:position}, speed, 'swing'); return false; }); }); </script> ただ一応前の状態でも動いていたのですが、それでも動いていてくれたのですね。 ただ#も文字列というのはびっくりしました。 あ、A、1は文字列というのはわかりますが。
shi_ue

2016/02/09 04:21

すみません。実験してみたら囲わなくても動くんですね。 でも、一応仕様に沿った方がいいので、囲った方がいいですよ。
think49

2016/02/09 05:02

To: shi_ue さん jQuery API Documentation には "value: An attribute value. Can be either an unquoted single word or a quoted string." とあり、"unquoted single word" も許容されていると思います。 文字種に言及が無いので仕様としては不十分な印象がありますが…。 別回答で触れているので良かったら参考にしてみてください。
退会済みユーザー

退会済みユーザー

2016/02/09 05:25

ありがとうございます。 お三方ともBAにしたいですね。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問