おしえて

JavaScript？jQuery？で書き方を教えてください。初心者です。 AAAという要素をステ

解決済

質問者：彩いろどり
質問日時：2023/08/04 22:09
回答数：2件

JavaScript？jQuery？で書き方を教えてください。
初心者です。
AAAという要素をステータスによって、表示、非表示にしたいです。
ステータスが900またら100または300の時だけ、AAAを非表示、それ以外の場合は表示
にするにはどうやって書けば良いでしょうか？
サンプルコードはステータス900の場合のみなので、or100or300を足せば良いとは思うのですが、書き方が悪かったのかうまく動かなくて…教えてください！

function () {
if ($('#Status').val() === '900' ) {
$('#AAA').hide();
} else {
$('#AAA').show();
}
}

通報する

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

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： fujillin
回答日時：2023/08/04 23:04

こんばんは

実態がよくわかりませんけれど・・・
＞$('#Status').val()
で値がとれているのなら、

　const v = $('#Status').val();
　if (v == '900' || v == '100' || v == '300') {
のようにすれば、ご質問の内容になるかと。
（ || はor演算子。論理和を意味します。）

まとめて記述するなら、
　if (['900','100','300'].includes($('#Status').val())) {
でも同様の判定ができると思います。

- 1
- 件

通報する

この回答へのお礼

ありがとうございます！
以下にすれば良いということですよね？
なんでか動かなくて…

function () {
const v = $('#Status').val();
　if (v == '900' || v == '100' || v == '300') {
$('#AAA').hide();
} else {
$('#AAA').show();
}
}

通報する

お礼日時：2023/08/07 23:30

No.2

回答者： fujillin
回答日時：2023/08/08 01:29

No1です。

＞なんでか動かなくて～～
HTMLがどうなっていて、どのようなタイミングで実行しているのかも不明ですけれど・・・

＞const v = $('#Status').val();
で値は取得できていますか？

「お礼」に提示したスクリプトには全角空白が含まれていますけれど、エラーが出ていませんか？
（最近のブラウザは、全角空白を許容するようになったようですけれど・・）
また、ご提示の関数は無名関数になっていますけれど、どのようにして実行していますか？
「$」が使われていますけれど、対応するライブラリは読み込まれていますか？

※ 全体像がわからず不明点も多すぎるので、動作しない原因として考えられる可能性が多岐にわたりすぎます。
（そもそも、ご提示のスクリプトが実行されているのかどうかも不明ですし）

実態がさっぱりわからないので、以下は、最低限の「似たような」動作をする例です。
（ご質問の判定部分は、同じ構造になるようにしてあります。）
※ ライブラリを用いていないので、$関数は要素取得のためだけの自前関数です。
※ インプットボックスの値が、100、300、900 のどれかと一致するとid=AAAの要素が非表示になります。（その他の値の場合は表示されます）
※ 丸っとコピペで試してみてください。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<input type="text" value="" id="Status">
<hr>
<div id="AAA" style="background:yellow;">AAAの要素</div>
<script >
const $ = s => document.querySelector(s);
$('#Status').addEventListener('keyup', ()=>{

const v = $('#Status').value;
if( v== '900' || v == '300' || v == '100')
$('#AAA').style.display = 'none';
else
$('#AAA').style.display = 'block';

});
</script>
</body>
</html>