プロが教える店舗＆オフィスのセキュリティ対策術

特定のクラスを持つ<li>を非表示にする方法

解決済

  • 質問者：--kenta--
  • 質問日時：
  • 回答数：5件

ネットで調べまくりましたが、実現できそうなものが見つけられなかったので質問させてください。
checkboxで指定したidとaタグに指定してあるclass名が一致しない<li>~</li>を非表示にしたいのですが、どのようにすれば実現できるでしょうか？下記の例ですと、idに"area12"が指定してある<li>~</li>を非表示にしたいです。どうぞよろしくお願いいたします。
【例】
<li><a href=""><label><input type="checkbox" checkd id="area10"/>鏡水</label></a></li>
<li><a href=""><label><input type="checkbox" checkd id="area11"/>金城</label></a></li>
<li><a href=""><label><input type="checkbox" checkd id="area12"/>三原</label></a></li>
<a class="area10"><img src="~"/></a>
<a class="area11"><img src="~"/></a>

質問者からの補足コメント

  • 実現可能であれば、何でも構いません。よろしくお願いいたします！

    No.1の回答に寄せられた補足コメントです。 補足日時：2016/10/17 18:14
    通報する

  • yambejp様
    teratailとどちらにコメントしようかと悩みましたがこちらにコメントさせていただきます。
    御回答いただきました内容でプレビュー確認してみましたが、area12の<li>~</li>が表示されたままの状態でした。もう一度ご教授いただければ助かります。

    「特定のクラスを持つ<li>を非表示にする」の補足画像2
    No.2の回答に寄せられた補足コメントです。 補足日時：2016/10/17 19:38
    通報する

  • 御返事ありがとうございます。<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1. …の部分は最新のCDNにしてあとはコピペで確認してみましたが、<li><input type="checkbox" checked id="area12"/><label for="area12">三原</label></li>は表示されたままでした。度々申し訳ないですが、再度ご教授いただけないでしょうか。

    「特定のクラスを持つ<li>を非表示にする」の補足画像3
    No.3の回答に寄せられた補足コメントです。 補足日時：2016/10/18 09:20
    通報する
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (5件)

No.1

  • 回答者： yambejp
  • 回答日時：

cssでは難しいかも、javascriptとかでよいのでしょうか？

この回答への補足あり
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： yambejp
  • 回答日時：

teratailにも書きましたが、こうなります



<script src="js/jquery.js"></script> <!-- jqueryは適当に組み込んでください -->
<script>
$(function(){
$('input[type=checkbox]').on('change',function(){
$('input[type=checkbox]').each(function(){
$('.'+$(this).prop('id')).toggle($(this).prop('checked'));
});
}).change();
});
</script>
<li><input type="checkbox" checkd id="area10"/><label for="area10">鏡水</label></li>
<li><input type="checkbox" checkd id="area11"/><label for="area11">金城</label></li>
<li><input type="checkbox" checkd id="area12"/><label for="area12">三原</label></li>
<a class="area10"><img src="~"/></a>
<a class="area11"><img src="~"/></a>
この回答への補足あり
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： yambejp
  • 回答日時：

どこが違うんでしょうね・・・


以下コピペしてみてください

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1. …
<script>
$(function(){
$('input[type=checkbox]').on('change',function(){
$('input[type=checkbox]').each(function(){
$('.'+$(this).prop('id')).toggle($(this).prop('checked'));
});
}).change();
});
</script>
</head>
<body>
<li><input type="checkbox" checked id="area10"/><label for="area10">鏡水</label></li>
<li><input type="checkbox" checked id="area11"/><label for="area11">金城</label></li>
<li><input type="checkbox" checked id="area12"/><label for="area12">三原</label></li>
<a class="area10"><img src="?" alt="area10image" /></a>
<a class="area11"><img src="?" alt="area11image" /></a>
</body>
</html>
この回答への補足あり
    • good
    • 0
    • 件
通報する

No.4

  • 回答者： yambejp
  • 回答日時：

誤解していたかもしれませんが、チェックしたら消すのでしょうか？


であればcheckedのチェックを逆転すればよいでしょう

$('.'+$(this).prop('id')).toggle($(this).prop('checked'));
↓↓↓
$('.'+$(this).prop('id')).toggle(!$(this).prop('checked'));
    • good
    • 0
    • 件
通報する
この回答へのお礼

yambejp様
何度もご回答いただきありがとうございます。fujillin様がご指摘されているとおり、私のつたない説明が原因でうまく伝わっていなかったようです。私が実現したかったのは、fujillin様の解釈の通りでした。この質問のみならず、他の質問でも積極的に御回答していただいていたのに。。大変申し訳ございませんでした。私の説明が意図した通り伝わる文章ならきっと解決できる御回答をしていたはずですよね。本当にお手数をお掛けしてすみませんでした

通報する
お礼日時：2016/10/18 11:58

参考程度に

No.5ベストアンサー

  • 回答者： fujillin
  • 回答日時：

こんにちは。


横からですが・・・


普通にご質問文を読むと、若干矛盾を感じながらも、
『チェックボックスに対応する画像要素の表示/非表示を制御したい』
というふうに推測できると思いますし、ANo2様がご回答の内容もそうなっています。

一方で、質問文を何度も読んでみて
＞特定のクラスを持つ<li>を非表示にする方法
　（li要素にクラス設定はされてないけれど…）
＞<li><input ～～～>三原</label></li>は表示されたままでした

などから妄想をたくましくしてみると、ひょっとすると
『リストの各項目に対応するリンク（画像）要素が文書内に存在しない場合は、そのリストの項目を非表示にしたい』
という意図のご質問なのでしょうか？

ついでながら、リストの項目内のリンク要素の意味は何なのかも謎ですね。


万一、妄想が当たっていた場合はこんな感じでしょうか？
（jQuery等は不要です）

<script type="text/javascript">
window.onload = function(){
Array.prototype.forEach.call(document.querySelectorAll("input[type=checkbox]"), function(e){
var a = e; while(a && a.nodeName != "LI") a = a.parentNode;
if(a && !document.querySelector("a." + e.id)) a.style.display = "none";
});
}
</script>
    • good
    • 0
    • 件
通報する
この回答へのお礼

fujillin様
御回答内容で実現できました。ありがとうございます。ご指摘の通り、意図した内容がうまく伝わる文章ではなかったです。。

通報する
お礼日時：2016/10/18 12:03

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

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報