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

HTML5ファイルで■を表示させ、その■を押したときに、その■を▲に変える

<span onclick="document.getElementById('foo').innerHTML='▲'" id="foo">■</span>

で実現できました。
でも、これだと複数ある場合に'foo'が重複してしまいます。自分自身を指定する、たとえば

<span onclick="document.getElementById(this).innerHTML='▲'">■</span>

方法は無いでしょうか。

A 回答 (2件)

シンプルに・・・



<span onclick="this.innerHTML='▲'">■</span>

で、いけるかと思います。
    • good
    • 0
この回答へのお礼

いけました

お礼日時:2017/09/20 09:24

jQueryを使えば簡単ですよ。



例えばソースは、

<p>形が変化するよ<span class="foo">■</span>をクリックしてみて。</p>
<p>こっちの<span class="foo">■</span>もクリックしてみてね。</p>

として、<head>〜</head>内にjQueryを読み込む。
※jQueryについては、検索サイトで調べてね。
読み込み方法はいろいろあるけど、例えば、

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.1 …

<script>
// そして、■をクリックすると▲に変わるは
$(function(){
$(".foo").click(function(){
$(this).text("▲");
});
});
</script>
</head>

で、他の■に影響されずに、その■のみが▲に変わります。
    • good
    • 0

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

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

Qwebsite作成 初心者

質問失礼致します。

websiteを作成しています。初心者です。
完成したサイトを別の端末で見ても大丈夫かどうかを確認しようと、
自身のpcの解像度を変更してみました。
すると文字や画像の配置がぐちゃぐちゃになって表示されます。

一度最初から作り直し、全てのサイズを%で指定し直しましたが、
結果は同じでした。。。

レスポンシブデザインどうこうとかではなく、
そもそもの記述の仕方に問題があるのかなと思います。

詳しい方、お答え頂けると非常に助かります。

Aベストアンサー

>>1440×900で見るとバッチリなのですが、
1152×720に変更すると配置がずれました。

解像度ではなくて、横幅×高さの大きさを変更した訳です。
多分区画の大きさを1440×900⇒1152×720に変更したと思います。

横幅、縦の高さが小さくなっています。
その中に配置するコンテンツ(文字や画像)がそのままだと、入りきらなくなり、右配置の区画は右下に並び、とかになります。

レスポンシブは親要素に対する%なので、シッカリデザインしないと上手く行きません。

レスポンシブは「はまり所」も多いので、慣れないとはまりっ放なしになります。

今のままの状態でアップして質問したら、回答する人も結構出てくると思います。

アップして見て貰うんだったら、googleヘルプフォーラムの方が良いかな?そういう技術専門コミュだから・・・・。

Qどこがおかしいのか教えてください。

ファイルで
file170901.jpg
file170902.jpg
file170903.jpg
file170904.jpg
   ・
   ・
   ・
file170908.jpg

とあってこれは170908部分は日付なので
当日170908以外のファイルを消したいので
(当時以外の31日前からのファイルを削除しようとしています)
下記のコードを書いたのですがうまくいきません
どこがわるいのでしょうか?

教えてください。

--------------------------------------------------

#!/usr/local/bin/perl

for($cnt = 31 ; $cnt = 1 ; $i = $i - 1) {

$tm = time - $cnt * 60 * 60 * 24;

($sec,$min,$hour,$mday,$mon,$year,$wno) = localtime($tm);

$nitizi = sprintf("%02d%02d%02d",($year+1900)-2000,$mon+1,$mday);

$setfile = './file'.$nitizi.'*.jpg';

#unlink glob($setfile);

}

exit;

ファイルで
file170901.jpg
file170902.jpg
file170903.jpg
file170904.jpg
   ・
   ・
   ・
file170908.jpg

とあってこれは170908部分は日付なので
当日170908以外のファイルを消したいので
(当時以外の31日前からのファイルを削除しようとしています)
下記のコードを書いたのですがうまくいきません
どこがわるいのでしょうか?

教えてください。

--------------------------------------------------

#!/usr/local/bin/perl

for($cnt = 31 ; $cnt = 1 ; $i = $i - 1) {
...続きを読む

Aベストアンサー

何故、./file170808*.jpgのようなワイルドカードにしているのかは、判りませんが、それは置いといて、
for($cnt = 31 ; $cnt = 1 ; $i = $i - 1) {

for($cnt = 31 ; $cnt > 0 ; $cnt--) {
        ^^^^^^^^^^^

$tm = time - $cnt * 60 * 60 * 24;

$tm = time() - $cnt * 60 * 60 * 24;
   ^^^^^

に変えてください。

Qhtmlでjpg画像をアップロードして、相手のパソコンかスマホにダウンロードさせたい。

お疲れ様です。
写真(同窓会)を郵送するには費用がかかります。
そこで、ホームページをから、相手がダウンロードできるようなに
プログラムを組みたいのですが!忘れてしまいました。
 現在作成中のホームページは、写真の閲覧のみです。
どんなプログラムを組めば相手のパソコン、スマホへダウンロード
できようになりますか?

Aベストアンサー

ダウンロードさせる?

無理ですよ、相手の人にダウンロードしてもらうようにしましょう

https://30d.jp/
写真共有サービスを利用して、画像をアップロード
参加した人にしか見えないようにパスワードを設定して、URLとパスワードをメールで送ってダウンロードしてもらいましょう


既にHPを持ってるのなら、そこにアップロードして、その画像のURLを教えて右クリックで保存してもらえばいいですよ

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派生クラスの利用にな当たり

以下のURL~プログラム見れます。
http://afurieitohannei.la.coocan.jp/P270haseiclass.htm
 さて、print 関数が9個もでてきて、スマートではないので
基礎レベルでは少し高度ですが!
$table=<<<eof~$〇〇〇=<<<eofを使いプログラムの変更を試みましたが、
エラーばかりでて、猿真似では到底できな代物です。
 この場合どうしたら<<<eofでprintの代替えができますか?
よろしくお願いします。

Aベストアンサー

print <<<eof
<tr>
<td>{$usr1->getname()}</td>
<td>{$usr1->getage()}</td>
<td>{$usr1->getadr()}</td>
<td>{$usr1->gettel()}</td>
<tr>
eof;

QMSの“小さな親切、余計なお世話”

Excel 2013 を使用しています。
添付図上段において、セル F1 に(赤矢印の先に)何やら表示されているアイコン、セル内に入力された文字列を隠しています。其処にマウスポインタを乗せると[挿入オプション]と表示され、当該アイコンの右端に現れたナビスコマークをクリックすると、添付図下段に示すメニューが。

この邪魔臭いアイコンを隠す(永久に表示されなくする)ための設定手順を教えてください。
ちなみに、このアイコンはどういう場合に表示されるようになっているのでしょうか?

Aベストアンサー

2016のオプション画像で申し訳ない。

「コンテンツを貼り付けるときに[貼り付けオプション]ボタンを表示する」
このチェックを外す。

QWEBページがIEだけ文字化けして困っています

文字コードがUTF-8で作られたテンプレを使ってWEBページを作成しておりましたが、IE11で文字化けして困っています。他のブラウザでは問題ありません。

まず文字化けするページをIEで表示し、表示→エンコード→その他→UTF-8で行うと
文字化けせず正しく表示されます。つまりブラウザがUTF-8であることを認識して
くれないことになります。

なおFFFTPでサーバー(ロリポップ)にアップする前にIEで表示させると文字化けは起こりません。
アップした後にIEで表示すると文字化けします。

FFFTPの設定はローカルの漢字コード、ホストの漢字コードを共にUTF-8BOMにしています。
HTMLファイルをBOM付、なしに保存して試しても文字化けします。

どなたか至急アドバイスいただけませんか?よろしくお願いいたします。


●文字化けするページのヘッダー情報
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=yes, maximum-scale=1.0, minimum-scale=1.0">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="GENERATOR" content="JustSystems Homepage Builder Version 18.0.14.0 for Windows">
<link rel="stylesheet" href="style.css" type="text/css" media="screen">
<!--[if lt IE 9]>
<script src="js/html5.js"></script>
<script src="js/css3-mediaqueries.js"></script>
<![endif]-->
<script src="js/jquery1.7.2.min.js"></script>
<script src="js/script.js"></script>
<title>〇〇〇〇</title>
</head>

文字コードがUTF-8で作られたテンプレを使ってWEBページを作成しておりましたが、IE11で文字化けして困っています。他のブラウザでは問題ありません。

まず文字化けするページをIEで表示し、表示→エンコード→その他→UTF-8で行うと
文字化けせず正しく表示されます。つまりブラウザがUTF-8であることを認識して
くれないことになります。

なおFFFTPでサーバー(ロリポップ)にアップする前にIEで表示させると文字化けは起こりません。
アップした後にIEで表示すると文字化けします。

FFFTPの設定はロー...続きを読む

Aベストアンサー

上の階層は下に伝播しますが、下の階層(カレント)自体の.htaccessが優先されるので
上の階層の設定はあまり関係ないかもしれません

Qアコーディオン仕様の中の ul li の中にリンクタグを付けると勝手に改行される

ホームページ制作中です。
アコーディオン仕様の中の ul li の中にリンクタグ(a href=)を付けると勝手に改行(折り返し)されてしまいます。
対策として ul の display を none から block に変更すると、アコーディオン機能が働かなくなります。
どなたか、解決方法を教えて下さい。
宜しくお願いいたします。

Aベストアンサー

私はslimmenueを使ってドロップダウンメニューを作りました。
CSSだけで作っている下記サイトは参考になりませんか。
li aにdisplay:block;を設定しています。
http://weboook.blog22.fc2.com/blog-entry-408.html

Q「投稿日はHTMLソースを見ればわかる」ってどういうことですか? http://www.f-tsun

「投稿日はHTMLソースを見ればわかる」ってどういうことですか?

http://www.f-tsunemi.com/blog/islam-woman-travel/23737/

これに書かれてました。

Aベストアンサー

ブログに記事を投稿すれば、普通なら投稿した日付はブログに載りますよね。
そうでなくても管理する側が投稿された記事を日付で管理していれば、その日付をソースから探すとかでわかるのでは?

と言いたいのかも。

Qarduinoを使ってプログラミングしてるのですが、二つのプログラミングを一つにするって可能ですか?

arduinoを使ってプログラミングしてるのですが、二つのプログラミングを一つにするって可能ですか?
ちなみに一つにしようとしているのは、
距離センサーとジョイスティックでモーター制御をするプログラムです

Aベストアンサー

もちろん可能です。
実現できるかどうかはプログラマのスキル次第です。


人気Q&Aランキング

おすすめ情報