人に聞けない痔の悩み、これでスッキリ >>

javascriptでファイルを別で作成する際の質問です。

<html>
<head>
<script type="text/javascript" src="script.js"></script>
<script src="jquery-3.2.1.min.js"></script>
</head>
<body>
</body>
</html>

head内にこのように記述したのですが、
script.jsファイルに記述しても反応がありません。
body内に記述した場合は正常に動作します。
原因として考えられることを教えて頂けると幸いです。

A 回答 (3件)

ANo1です。



実際の内容がわからないので、なんとも言えませんが、script.jsの内容を
 alert("OK");
程度のものにしても動作しないでしょうか?
あるいは、ブラウザの開発ツールなどにエラー表示が出ていたりしないでしょうか?
    • good
    • 0
この回答へのお礼

ご返答、ありがとうございます。

はい、、、動作しません。
根本的な部分だと思いますので、
一旦はhtml内に記述して対応しています。
エラー表示も出ていますので、一度自分で検討してみますね。

お礼日時:2017/09/23 13:45

JSファイルの内容やパスを補足していただせると良いのだけれど...

    • good
    • 0
この回答へのお礼

ご返答、ありがとうございます。

もうちょっといろいろ試せそうなので、
それでも無理なら再度質問させて頂こうと思います。

ご指摘もありがとうございます。

お礼日時:2017/09/27 17:15

こんばんは。



内容がわからないので、単なるあてずっぽうですが…

jQueryを読み込んでいるようですが、ひょっとしてscript.jsはjQuery利用のスクリプトだつたりしませんか?
もしそうなら、読み込む順序が逆順になっているのでは?

あて推量なので、外していたら無視してください。
    • good
    • 0
この回答へのお礼

ご返答、ありがとうございます。
私もそうかなと思い、逆も試したのですが動作しなかったのです・・・。
でもわざわざありがとうございます!!

お礼日時:2017/09/22 10:57

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aと関連する良く見られている質問

Qcsvファイルを読み込み、該当項目をhtmlに表示する方法

下記のようなcsvファイルがサーバ上にあり、毎日最新情報に更新されます。
サーバ上の同階層にあるHTMLページに、csvファイルの一部に該当する項目を
表示したいのですが、どのようにしたら実現できるのかわかりません…。
どうか助けてください。よろしくお願いいたします。

■csvファイル(data.csv)
種類,国,売上目標,売上実績,前年売上
りんご,国内,100,90,80
バナナ,国内,100,80,90
りんご,海外,100,110,100
バナナ,海外,100,50,80

■HTMLページ(index.html)
売上達成率【国内】りんご90% (前年比+10) | バナナ80%(前年比-10)
売上達成率【海外】りんご110%(前年比+10)| バナナ50%(前年比-30)

※マイナスになっている場合は赤字にしたいです。

Aベストアンサー

No.5&6です。何も表示されなかったとのことですので、
試しにfc2にアップロードしてみましたので、下記URLでも表示されないでしょうか。

https://fjicode.web.fc2.com/gooqa/9928341/index.html

もし上記サイトでうまく表示されましたら、上記サイトのソース表示から取得した方が手っ取り早いかもしれません。

Qjavascript テキストエリアを1行ごとに文字カウントしたい

テキストエリアの文字を1行ごとにカウントさせたいのです。
現在は半角なら0.5、全角なら1.0としてカウントさせて、これを行ごとに分散させたいのです。

未達の条件
・改行、スペースはカウントしない
・各行ごとのカウントになっていない

<!doctype html>
<html>
<head>
<meta charset="euc-jp">
<title>テキストエリアの文字カウント</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>

function ShowLength( str ) {
len = 0;
for(i=0;i<str.length;i++) {
var c = str.charCodeAt(i);

if ( (c >= 0x0 && c < 0x81) || (c == 0xf8f0) || (c >= 0xff61 && c < 0xffa0) || (c >= 0xf8f1 && c < 0xf8f4)){
len += 0.5;
}
else { len += 1; }
}
len = parseFloat(len).toFixed(1)
document.getElementById("inputlength01").innerHTML = len;
document.getElementById("inputlength02").innerHTML = len;
document.getElementById("inputlength03").innerHTML = len;
}
</script>
</head>
<body>
<table>
<tr>
<th>行別カウンター</th>
<td>
<textarea id="input_text" placeholder="" name="summary" rows="5" onkeyup="ShowLength(value,'inputlength');"></textarea>
<div class="countWrrap">
<div class="countDsign">
<ul>
<li id="comment01">1行目: <span id="inputlength01">0.0 </span>/ 35</li>
<li id="comment02">2行目: <span id="inputlength02">0.0 </span>/ 35</li>
<li id="comment03">3行目: <span id="inputlength03">0.0 </span>/ 35</li>
</ul>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>

テキストエリアの文字を1行ごとにカウントさせたいのです。
現在は半角なら0.5、全角なら1.0としてカウントさせて、これを行ごとに分散させたいのです。

未達の条件
・改行、スペースはカウントしない
・各行ごとのカウントになっていない

<!doctype html>
<html>
<head>
<meta charset="euc-jp">
<title>テキストエリアの文字カウント</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/j...続きを読む

Aベストアンサー

ANo1です。

う~~~ん・・・

・・とりあえず、
>useNum = str.split(/\r\n|\r|\n/);//これが機能していない感じ
直後にuseNumの内容を調べてみれば、きちんと機能していることがわかると思います。
useNum(=配列)には改行で分割された1行ずつの文字列が取得できます。
通常は、str.split("\n") でも大丈夫だと思いますが、正規表現でもちゃんと動作します。
しかしながら、そのあとの文字チェックのループではもとの全文(str)を対象にループさせているので、なんのために1行ずつに分けたのわかりませんね。

さらには、そのループの中で
>var useNum = new Array();
>useNum.push(len);
としているので、変数宣言に関しては巻き上げられますが、useNum = new Array()の部分は実行されます。
結局、1文字チェックする毎にuseNumを初期化して、それに変数lenをpushしていることになります。
そのあとで、(多分デバッグ用に?)
>console.log(useNum);
となさっていますが、useNumの値は予定通りの内容になっていますか?
この結果、最初に1行ずつに分けたuseNumの内容はすぐに破棄されるので、意味のない処理をしていることになりませんか?

>ShowLength.innerHTML = len.toFixed(1);
ShowLengthは実行中の関数名のはずですが、関数のinnerHTML属性にlen.toFixedの値を代入してどうしようというお考えでしょうか?
(javascriptでは関数もオブジェクトなので、処理自体はエラーにはなりませんが…)

>~~~.innerHTML = useNum[0];
>~~~.innerHTML = useNum[1];
ループの計算でuseNumは初期化されているので、1要素の配列になっているはずです。
また、この値は最後にチェックしたlenの値が入っているはずですが、これを表示したいわけではないと思いますが?
さらに、useNum[1]、 useNum[2]は存在しないので、常にundefinedが出力されるものと想像します。

その他に、
>str = str.replace(/\r\n|\n|\r/g, "");//改行削除
ループ内で毎回処理をしていますが、1度行えばよい処理のはずですので、効率を考えればループの外で処理すべきではないでしょうか?
というよりも、本来なら
>useNum = str.split(/\r\n|\r|\n/)
ですでに改行は取り除かれている文字列を処理するはずなので、不要な処理とも言えます。

HTMLを見てみると、table表示にしていますが、1行2セルのみの構成で、ほとんどの内容が後のセル内にありますが、tableにする意味があるのか疑問です。


などなど、他にもありそうですが・・・
1行ずつ分割したなら、その各行に対して「質問者様がなさりたい文字数計算」を行って、結果をそれぞれの表示用要素に表示するようになさりたいのではないでしょうか?
処理の流れを、もう一度きちんと整理なさってからスクリプトを記述なさった方が良いかもしれません。
また、前回も指摘しましたが、3行決め打ちのスクリプトにしてしまうと、1行しかない時や4行以上ある時に予想外の結果となることがありますので、注意なさった方がよさそうに思います。


なんとなく、なさりたいことが見えてきましたので、似たようなものを作成してみました。
と言っても、全体的に構成をだいぶ変えてしまいましたので、あくまでもご参考としてのものです。
3行までを限定として処理しています。(4行目以降は、存在しても無視)
なお、(どこかに書いてあったように思いますが)スペースの削除はしていません。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>

<style type="text/css">
h4 { display: inline-block; }
span.length { margin: 0 0.5em; }
#countWrap { margin-left: 6em; }
</style>

</head>
<body>

<div>
<h4>行別カウンター</h4>
<textarea id="input_text" name="summary" rows="5"></textarea>
</div>

<ul id="countWrap">
<li>1行目:<span class="length">0.0</span>/ 35</li>
<li>2行目:<span class="length">0.0</span>/ 35</li>
<li>3行目:<span class="length">0.0</span>/ 35</li>
</ul>


<script type="text/javascript">

function C(c, c1, c2){ return c >= c1 && c < c2; }

function codeCheck(c){
return C(c,0x0,0x81) || C(c,0xff61,0xffa0) || C(c,0xf8f1,0xf8f4) || (c==0xf8f0);
}

function countLength(s){
var i, len = 0;
for (i=0; i<s.length; i++){ len += codeCheck(s.charCodeAt(i))?1:2; }
return (len/2).toFixed(1);
}


document.getElementById("input_text").addEventListener("keyup", function(){
var i, strs = this.value.split("\n");
var elms = document.querySelectorAll("#countWrap span.length");
for(i=0; i<3; i++){
elms[i].innerHTML = countLength(strs[i] || "");
}
}, false);

</script>
</body>
</html>

ANo1です。

う~~~ん・・・

・・とりあえず、
>useNum = str.split(/\r\n|\r|\n/);//これが機能していない感じ
直後にuseNumの内容を調べてみれば、きちんと機能していることがわかると思います。
useNum(=配列)には改行で分割された1行ずつの文字列が取得できます。
通常は、str.split("\n") でも大丈夫だと思いますが、正規表現でもちゃんと動作します。
しかしながら、そのあとの文字チェックのループではもとの全文(str)を対象にループさせているので、なんのために1行ずつに分けたのわかりませんね。...続きを読む

QHTML5のことについてなのですが……

私は現在javascriptのものをHTML5に書き換えるということをしています。
色々な方に手伝ってもらったのですが、どうにも後少しが届きません。
モノは
https://chaos.keiei.shikoku-u.ac.jp/ProtoType/
をHTML5に書き換えたいと思っているのですが、詳しい方、また教えるのが苦ではない方はどうかお力をお貸しいただけないでしょうか?
私は圧倒的に知識が不足していて、あまりわかりませんので。

Aベストアンサー

こんにちは

>javascriptのものをHTML5に書き換えるということをしています
意味がよくわかりません。
「HTML4.0をHTML5に」などであればわかるのですが・・
ほとんどがjavascriptで生成されているページをjavascriptを使用しないように書き換えたいという意味にも取れますが、ご提示のページのような場合、採点をするのには何らかのプログラムが必要になると思います。

javascriptを排除したいのなら、その部分をどのような仕組みで代替しようと考えていらっしゃるのでしょうか?
例えば、サーバ側のプログラムで採点するというものも考えられますが、その場合は構成がまったく別のものになると思われます。

一方で、ご提示のページはjavascriptを利用する前提で作成されているように見受けられますが、単にマークアップをHTML5になさりたいということであれば、
 http://www.htmllint.net/html-lint/htmllint.html
などを利用してチェックすることで、比較的簡単に実現できると思います。

ちなみに、以下はご提示のページをチェックしてみた結果です。
◇修正した方が良さそうな指摘
line 9:<HEAD>〜</HEAD> 内には <TITLE> が必要です。
line 20:<H3> の ID 属性の値 `q_title` は 18行目ですでに使われています。

◇厳密には正しくないかもしれないが、かなり軽微な指摘
line 31:<BUTTON> には TABINDEX 属性を指定するようにしましょう。
line 31:<BUTTON> には ACCESSKEY 属性を指定するようにしましょう.
line 37:<BUTTON> には TABINDEX 属性を指定するようにしましょう.
line 37:<BUTTON> には ACCESSKEY 属性を指定するようにしましょう。
line 63:<BUTTON> には TABINDEX 属性を指定するようにしましょう。
line 63:<BUTTON> には ACCESSKEY 属性を指定するようにしましょう。


なお、ご提示のページはdivを主体とした構成になっているようですが、HTML5では、内容を示すための要素(section article nav header footerなど)が追加されていますので、意味を持たないdiv要素はこれらに属さない場合に用いるようになっているようです。
以下はHTML5の解説サイトの一例です。ご参考まで。
http://www.html5.jp/

javascriptの内容は見ていませんが、どこかが思ったように動作しないということであれば、「◇◇の際に○○を△△にしたいのだけれど、××になってしまう」といったように具体的に質問をなさらないと、
>どうにも後少しが届きません。
というだけでは、何をなさりたいのかは「知る人ぞ知る」ということになってしまいます。

こんにちは

>javascriptのものをHTML5に書き換えるということをしています
意味がよくわかりません。
「HTML4.0をHTML5に」などであればわかるのですが・・
ほとんどがjavascriptで生成されているページをjavascriptを使用しないように書き換えたいという意味にも取れますが、ご提示のページのような場合、採点をするのには何らかのプログラムが必要になると思います。

javascriptを排除したいのなら、その部分をどのような仕組みで代替しようと考えていらっしゃるのでしょうか?
例えば、サーバ側のプログラ...続きを読む

Q教えて下さい。 phpで作成しています、データ一覧表示の画面があります。 画面表示の時点でデータを全

教えて下さい。
phpで作成しています、データ一覧表示の画面があります。
画面表示の時点でデータを全件表示しており、それに対するページング(js)の機能もつけています。

検索ボタンで入力条件通りのデータをajaxを使って
非同期(画面リロードなし)で表示していますが
ページングが動きません。(最初の全件データ分の
ページングが表示されたままの状態です)

一般的なJQeryのページングを使っているのですが単純にリロードされていないから読み込まれていないということなのでしょうか?

また、ページのソースを見ても(右クリックでソース表示)最初の全件がHTML上では表示されています。
そもそも非同期で取得したデータはソース上は表示されないものなのでしょうか?(innerhtmlで記述)

初心者でわからないことだらけで申し訳ありません。
何かとっかかりがあればと思いますのでご教授下さい。

非同期でのページングのやり方など教えてもらえると助かります。

長々と書いてしまいましたがよろしくお願いいたします。

リロードしていないからjsが動かないのかと思うのですが

教えて下さい。
phpで作成しています、データ一覧表示の画面があります。
画面表示の時点でデータを全件表示しており、それに対するページング(js)の機能もつけています。

検索ボタンで入力条件通りのデータをajaxを使って
非同期(画面リロードなし)で表示していますが
ページングが動きません。(最初の全件データ分の
ページングが表示されたままの状態です)

一般的なJQeryのページングを使っているのですが単純にリロードされていないから読み込まれていないということなのでしょうか?

ま...続きを読む

Aベストアンサー

こんにちは


通常の「ページのソース表示」は、サーバから送られたHTMLのソースを表示します。
その後スクリプト等でDOMを変更しても、それは「ソース」ではないので、反映されることはありません。
実際に表示されているDOMの状態を知りたければ、スクリプトでinnerHTMLなどを取得して表示すれば見られます。
最近のブラウザであれば、デバッグツールが付属していると思いますので、そちらから参照するのが簡単ではないでしょうか?
(ツールのHTMLタブなどから参照できると思います)


実際の内容がわからないので、以下は、単なる推測にすぎませんが・・・

>一般的なJQeryのページングを使っているのですが~~
多分、ライブラリか何かを利用しているのではないかと推測します。
最初に初期設定を行っていると思いますが、設定がそのままなので、ajaxで内容が変わってもライブラリにとってはもとの状態のままと認識して、その後の処理ではエラーが発生していたりするのではないでしょうか?
対象データが変わった時点で、再度、初期設定をしてあげれば動作する可能性が高いと思います。


一方で、
>画面表示の時点でデータを全件表示しており~~
とのことなので、全件を一括読み込みしているのなら、検索といっても単に「絞り込む」だけでしょうから、わざわざajaxで通信処理などをしなくてもローカル側で直接絞り込めば(javascript利用)済みそうに思います。
データ件数分の表示/表示のフラグを持つだけで実現できそうなので・・・

利点としては、レスポンスが速くなるであろうことと、サーバ側の負荷が減ることぐらいでしょうか。
件数が膨大な場合はajaxが有効とは思いますが、その場合は、最初に全件読み込みは行わないであろうと思います。(膨大なので)

こんにちは


通常の「ページのソース表示」は、サーバから送られたHTMLのソースを表示します。
その後スクリプト等でDOMを変更しても、それは「ソース」ではないので、反映されることはありません。
実際に表示されているDOMの状態を知りたければ、スクリプトでinnerHTMLなどを取得して表示すれば見られます。
最近のブラウザであれば、デバッグツールが付属していると思いますので、そちらから参照するのが簡単ではないでしょうか?
(ツールのHTMLタブなどから参照できると思います)


実際の内容がわからない...続きを読む

QPHPをHTMLに埋め込んだ際のエラーメッセージの表示

初歩的な質問ですみません。
PHPでユーザーが間違った入力をした際に
$err_msg =array();
にエラーメッセージを配列で代入していくようにして、htmlで表示をするようにしたいです。
例)$err_msg[] = '入力欄に何も入力されていません';
表示させたいhtml箇所には
```
<?php
if(count($err_msg)>0){ ?>
<?php
foreach($err_msg as $value){ ?>
<p><?php echo $value; ?></p>
<?php } ?>
<?php } ?>
```
のようにして、$err_msgが1つでもあった時に表示ということにしたいのですが、ページをプレビューにすると$_POSTで何も受け取る前からエラーメッセージがずらっと表示されてしまうのですが(添付画像のようになります)、送信する前はこれらのメッセージを表示させたくないのです。何か解決方法があればお力を貸していただけるとありがたいです。

初歩的な質問ですみません。
PHPでユーザーが間違った入力をした際に
$err_msg =array();
にエラーメッセージを配列で代入していくようにして、htmlで表示をするようにしたいです。
例)$err_msg[] = '入力欄に何も入力されていません';
表示させたいhtml箇所には
```
<?php
if(count($err_msg)>0){ ?>
<?php
foreach($err_msg as $value){ ?>
<p><?php echo $value; ?></p>
<?php } ?>
<?php } ?>
```
のようにして、$err_msgが1つでもあった時に表示と...続きを読む

Aベストアンサー

$err_msg[]に値が入る処理が走行してしまっているのではないですか?
POST先が自分自身で、
if (!empty($_POST["name"])) {
// 入力チェック
}
みたくなってたら$err_msg[]にエラーメッセージが入らないと思いますが。

Qホームページ JavaScript

CTRLキー+Fで検索すると、黄色の背景色がつくように
特定の文字に背景色をつけたいのですが、どのようにすればいいのでしょうか?

例)
◆検索キーワード : 「 テスト 」

今日はテスト
テストの点数87点
↑この検索キーワードと同じ箇所のテストの部分だけに背景色をつけるようにしたいです。

Aベストアンサー

mark.jsを使えば簡単にできますよ。

公式ページ
https://markjs.io/

簡単なサンプル作りました。
https://jsfiddle.net/b1efes63/

実際にはハイライトする文字列を<span>で包んでるようです。

Qcheckboxのチェックマークカスタマイズ(css)

前回に引き続き、checkboxにslidetoggleを使用し、
チェックボックス(複数個)をカスタマイズしていますが、チェックマークがつかないです。
afterの定義ができていないので教えて下さい><
----------

<div id="wrap">

<div class="slide_wrap">
<label><input type="checkbox" value="" />title</label>
<div class="slide_box">here</div>
</div>

<div class="slide_wrap">
<label><input type="checkbox" value="" />title</label>
<div class="slide_box">here</div>
</div>

----------
<style>
input[type="checkbox"] { /* defaultのcheckbox */
display: none;
}

label {
position: relative;
display: inline-block;
padding: 3px 3px 3px 22px;
cursor: pointer;
}

label::before {
position: absolute;
content: '';
top: 50%;
left: 0;
width: 14px;
height: 14px;
margin-top: -8px;
background: #fff;
border: 1px solid pink;
}
input[type="checkbox"]:checked + label::after {
position: absolute;
content: '';
top: 5px;
left: 3px;
width: 13px;
height: 5px;
border-left: 2px solid #3498db;
border-bottom: 2px solid #3498db;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
-------

前回に引き続き、checkboxにslidetoggleを使用し、
チェックボックス(複数個)をカスタマイズしていますが、チェックマークがつかないです。
afterの定義ができていないので教えて下さい><
----------

<div id="wrap">

<div class="slide_wrap">
<label><input type="checkbox" value="" />title</label>
<div class="slide_box">here</div>
</div>

<div class="slide_wrap">
<label><input type="checkbox" value="" />title</label>
<div class="slide_box">here</div>
</div>

--------...続きを読む

Aベストアンサー

ANo1です。

およその雰囲気がわかってきましたが、どうやらinput要素やlabelは必ずしも必要ではなさそうな気がしましたので、スクリプト利用で開閉とチェックを行う例を作成してみました。ご参考までに。
(HTMLの表示内容は同じですが、全体に簡略化しました。
 チェックボックスの制御は#1の最後の方に書いた方法です。)

dt要素にchekedクラスを設定するとチェックボックスにチェックが入るようにしておいて、スクリプトからはクラスの制御だけを行っています。
全体的な印象では、なんとなくチェック/非チェックが逆のような気もしましたが、ご提示の動作のままにしてあります。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>

<style type="text/css">
.slide{ padding-left: 25px; }
.slide dt{
position: relative;
margin: 1em 0 0 0;
cursor: pointer;
}

.slide dd, .slide dt:first-child{
margin: 0;
}

/* チェックボックス枠 */
.slide dt::before{
position: absolute;
content: '';
top: 0;
left: -25px;
width: 16px;
height: 16px;
border: 1px solid #F6F;
border-radius: 4px;
}

/* チェックマーク */
.slide dt.cheked::after{
position: absolute;
content: '';
top: 5px;
left: -22px;
width: 10px;
height: 4px;
border: 0 solid #28A;
border-width: 0 0 3px 2px;
transform: rotate(-45deg);
}
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$(".slide dt").on("click", function(){
var f = $(this).hasClass("cheked");
if(f) $(this).removeClass("cheked").next().slideDown();
else $(this).addClass("cheked").next().slideUp();
});
});
</script>
</head>
<body>

<dl class="slide">
<dt>title1</dt>
<dd>content1</dd>

<dt>title2</dt>
<dd>content2</dd>

<dt>title3</dt>
<dd>content3</dd>

<dt>title4</dt>
<dd>content4</dd>
</dl>

</body>
</html>

※ #1にも書きましたが、CSSのみでもほぼ同様のものが実現可能です。
  そちらのスタディは質問者様にお譲りします。(笑)

ANo1です。

およその雰囲気がわかってきましたが、どうやらinput要素やlabelは必ずしも必要ではなさそうな気がしましたので、スクリプト利用で開閉とチェックを行う例を作成してみました。ご参考までに。
(HTMLの表示内容は同じですが、全体に簡略化しました。
 チェックボックスの制御は#1の最後の方に書いた方法です。)

dt要素にchekedクラスを設定するとチェックボックスにチェックが入るようにしておいて、スクリプトからはクラスの制御だけを行っています。
全体的な印象では、なんとなくチェック/非チ...続きを読む

QJquery cheeckbox(複数)とslidetoggle使用時のコードを教えて下さい><

cheeckbox5項目くらい作成し、各項目にslidetoggleで詳細がでてくるような動きを作りたいのですが、複数だとうまくいきません。。
単体ではできました。

おそらくnextを使うかと思うのですが、どなたか教えて下さい><


<script>

$(document).ready(function(){
$('#test').click(function() {
$('#box').slideToggle(this.checked);
});
});
</script>


<body>

<div class="box_001">
<h1>test</h1>
<input type="checkbox" name="sample1" id="test" />
<label for="test"></label>
<img src ="../test/img/test_06.png" width="200" class="ttl_01" >
<div id="box">
<div class="imgBox1"><img src="../test/img/test_10.png" width="100" ></div>
<div class="textBox1">
<h2><img src="../test/img/test_06.png" width="300" class="ttl_03"></h2>
<p>sample</p>
</div>
</div>
</div>
(※.box_001と同じものが続く。)

cheeckbox5項目くらい作成し、各項目にslidetoggleで詳細がでてくるような動きを作りたいのですが、複数だとうまくいきません。。
単体ではできました。

おそらくnextを使うかと思うのですが、どなたか教えて下さい><


<script>

$(document).ready(function(){
$('#test').click(function() {
$('#box').slideToggle(this.checked);
});
});
</script>


<body>

<div class="box_001">
<h1>test</h1>
<input type="checkbox" name="sample1" id="test" />
<label for="te...続きを読む

Aベストアンサー

こんにちは

ご質問文では、要素のIDを利用して識別する方法で記述なさっていますが、その方法で複数の構成に対応したいのであれば、そのまま(同じ内容をコピーして)IDを変えた記述を必要なだけ行えば実現できます。

とはいえ、ほとんど同じ内容を何度も記述するのも非効率的なので、通常は、文書の構造や(複数設定可能な)クラスなどを利用することで、複数のセットに対応可能な記述にすることが多いです。(他にも方法はありますが)


文書構造がどの程度確定しているのか不明なので、以下はクラス名を利用した一例です。

※ ご質問の動作に直接関係のない要素は省略してあります。
※ label要素がfor属性でIDを利用する記述法になっていますが、それだとidを個別に割り当てる必要があるため、ひとまず、子要素に対象を包含させる記述方法に変えています。
※ ご提示のスクリプトでは、slideToggleの引数にthis.checkedを渡していますが、引数としての意味が不明なので外してあります。
(slideToggleの引数の意味はこちら↓)
http://api.jquery.com/slideToggle/

<script>
$(document).ready(function(){
$(".slide_wrap input[type='checkbox']").on("click", function(){
$(".slide_box", $(this).closest(".slide_wrap")).slideToggle();
});
});
</script>

<body>
<div class="slide_wrap">
<h1>タイトル?</h1>
<label><input type="checkbox" value="" />画像?</label>
<div class="slide_box">内容は省略</div>
</div>

<div class="slide_wrap">
<h1>タイトル?</h1>
<label><input type="checkbox" value="" />画像?</label>
<div class="slide_box">内容は省略</div>
</div>
</body>

こんにちは

ご質問文では、要素のIDを利用して識別する方法で記述なさっていますが、その方法で複数の構成に対応したいのであれば、そのまま(同じ内容をコピーして)IDを変えた記述を必要なだけ行えば実現できます。

とはいえ、ほとんど同じ内容を何度も記述するのも非効率的なので、通常は、文書の構造や(複数設定可能な)クラスなどを利用することで、複数のセットに対応可能な記述にすることが多いです。(他にも方法はありますが)


文書構造がどの程度確定しているのか不明なので、以下はクラス名を利用...続きを読む

Q次の英語を日本語に訳して下さい! Once you carry out this practice

次の英語を日本語に訳して下さい!
Once you carry out this practice with sincere faith in the teachings of Nichiren Daishonin. you will acquire various benefits. such as.

Aベストアンサー

こんにちは

Googleさんに頼んでみただけですが・・・(VBAは使っていません)

日蓮大聖人の教えを心から信じてこの修行に励むことで、あなたは様々な成果を得られるでしょう。例えば…

※ such as の後が途切れているので、以降は不明です。

Qプログラミング

プログラミングを学びたいんですが最初にある程度プログラミングができるようになってからアルゴリズム論を学ぶ方がいいですか?それとも最初にアルゴリズム論を学んだ方がいいですか?

Aベストアンサー

何の言語か知りませんが、最初に、アルゴリズムなどに手をつけたら、闇の中だと思いますね。よく、構文と勘違いしている人がいますね。

アルゴリズムの定義をどういうように解釈しているのか分かりませんが、アルゴリズムはコンピュータやプログラミング言語に依存しません。一般的な定義は「問題を解くための論理または手順」のこと。また、コンピュータのプログラミング向きでもないものも存在します。

一度は、丁寧に勉強しましたが、私は、ほとんどアルゴリズムは分かっていません。たぶん、古典的なものは、コンピュータのない時代に数学の天才が作ったものだと思いますが、囲碁や将棋の定石のような解釈しかしていません。VBAなどでは、アルゴリズムを使った人など、年に一度、現れるかどうかですね。理由は、.NetFrameWork などの関数に、すでに包合されているからです。

ここのサイトの下に代表的なアルゴリズムの名称が出ています。

http://e-words.jp/w/%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0.html

何の言語か知りませんが、最初に、アルゴリズムなどに手をつけたら、闇の中だと思いますね。よく、構文と勘違いしている人がいますね。

アルゴリズムの定義をどういうように解釈しているのか分かりませんが、アルゴリズムはコンピュータやプログラミング言語に依存しません。一般的な定義は「問題を解くための論理または手順」のこと。また、コンピュータのプログラミング向きでもないものも存在します。

一度は、丁寧に勉強しましたが、私は、ほとんどアルゴリズムは分かっていません。たぶん、古典的なものは...続きを読む


人気Q&Aランキング