javascriptで特定のclassを表示、非表示にする方法を検討中なのですが、
a,b,cと三つのボタンが有り、abcというclassがあります。
aをクリックするとb,cが非表示になり、aが表示される
bをクリックするとa,cが非表示になり、bが表示される
cをクリックするとa,bが非表示になり、cが表示される
と言う動作をさせたいのですが、上手くいきません。
どなたかご教授ください。
お願いいたします。
<script type="text/javascript">
<!--
function change(site){
if(!document.getElementsByTagName){return;}
var e = new Array('a','b','c');
var objs = document.getElementsByTagName('*');
for(i=0;i<e.length;i++){
if(e[i] != site){
for(y=0;y<objs.length;y++){
if(objs[y].className == e[i]){
objs[y].style.display = 'none';
}else{
objs[y].style.display = '';
}
}
}
}
}
// -->
</script>
<table cellspacing="10">
<tr>
<th>テスト</th>
<td>
<input type="text" name="" id="" class="a" value="" />
<input type="text" name="" id="" class="b" value="" />
</td>
</tr>
<tr>
<th>test</th>
<td>
<input type="text" name="" id="" class="c" value="" />
</td>
</tr>
</table>
<a href="javascript:change('a')">a</a>
<a href="javascript:change('b')">b</a>
<a href="javascript:change('c')">c</a>
No.1ベストアンサー
- 回答日時:
短時間でまとめたので、ほとんど何も考えていません。
他にもたくさんやり方がありますが、とりあえずシンプルを目指して書きました。var cname = new Array();
cname["a"] = new Object("a" == site ? "block": "none");
cname["b"] = new Object("b" == site ? "block": "none");
cname["c"] = new Object("c" == site ? "block": "none");
//cname["a"] = new Object("a" == site ? "visible": "hidden");
//cname["b"] = new Object("b" == site ? "visible": "hidden");
//cname["c"] = new Object("c" == site ? "visible": "hidden");
var objs = document.getElementsByTagName('*');
for(var y=0;y<objs.length;y++){
if(cname[(objs[y].className)] != undefined){
objs[y].style.display = cname[(objs[y].className)] ;
// objs[y].style.visibility = cname[(objs[y].className)] ;
}
不特定多数のオブジェクトをClassNameで判断して処理するやり方は、意図する事はわからないでもないですが、現実的ではありませんね。確かにこれだと、後から変更しなくても、オブジェクトを増やしてゆくだけでいいのですが、オブジェクト型DBとかECサイトなど、リストが多いものに関しては、パフォーマンスが悪くなり、あまりお勧めできるやり方ではないですね。
change()に対象となるIDの配列(又はHTMLオブジェクト)を渡して、処理するほうが、パフォーマンス的にも、コード的にも、早くシンプルに書けます。
今回のコードのポイントは、Display=block とした場合、"" ではなく、none を指定しないとだめですね。
それと、”if(e[i] != site){” だと、表示対象のオブジェクトで、現在非表示の場合は表示処理をしないとだめですね。コード的に間違いはそこです。
後、CSS的にはBlockだとフォーマットが変更されてしまいます。それを意図したならいいですが、"visible"で表示だけを消してもいいのかな、と思います。
JavaScript1.2 レベルであれば、change()に渡す時に、("block", "none", "none")で渡して、change(a,b, c)にすればいいわけです。そうなんです、渡す時にもっと確定した情報を渡せばいいわけです(配列で渡してもいいですね)。
とてもわかりやすいご説明ありがとうございます。
おかげで問題が解決いたしました。
ちなみに他にもたくさんやり方とか教えていただけると
幸いです。
どうぞ宜しくお願いいたします。
No.8
- 回答日時:
#7のていせい。
ごめん。var change = (function ( ) {
var classA = document.getElementsByClassName( 'a' );
var classB = document.getElementsByClassName( 'b' );
var classC = document.getElementsByClassName( 'c' );
return (function ( setter ) {
return function ( s, css ) {
if( 'undefined' == typeof css )
css = 'inline';
Array.map( classA, setter( s == 'a' ? css: 'none' ) );
Array.map( classB, setter( s == 'b' ? css: 'none' ) );
Array.map( classC, setter( s == 'c' ? css: 'none' ) );
};
})(
function ( css ) {
return function ( e ) { e.style.display = css; };
})
})();
No.7
- 回答日時:
くらすがこていなら、こっちがすこしはやいかなぁ~?
var change = (function ( ) {
var classA = document.getElementsByClassName( 'a' );
var classB = document.getElementsByClassName( 'b' );
var classC = document.getElementsByClassName( 'c' );
return (function ( setter ) {
return function ( s, css ) {
if( 'undefined' == typeof css )
css = 'inline';
Array.map( classA, setter( s == 'a' ? css, 'none' ) );
Array.map( classB, setter( s == 'b' ? css, 'none' ) );
Array.map( classC, setter( s == 'c' ? css, 'none' ) );
};
})(
function ( css ) {
return function ( e ) { e.style.display = css; };
});
})();
No.6
- 回答日時:
ていせい。
var change = (function ( ) {
var setter = function ( css ) {
return function ( e ) { e.style.display = css; };
};
var none = setter( 'none' );
return function ( s, css ) {
var disp = setter( 'undefined' !== typeof css ? css: 'inline' );
var func;
func = s == 'a' ? disp: none;
Array.map( document.getElementsByClassName( 'a' ), func );
func = s == 'b' ? disp: none;
Array.map( document.getElementsByClassName( 'b' ), func );
func = s == 'c' ? disp: none;
Array.map( document.getElementsByClassName( 'c' ), func );
};
})();
No.5
- 回答日時:
なしのつぶてだが、こういうのはどう?うごかないぶらうざもあるけど。
var change = (function ( ) {
var setter = function ( css ) {
return function ( e ) { e.style.display = css; };
};
var none = setter( 'none' );
return function ( s, css ) {
var disp = setter( 'undefined' !== typeof css ? css: 'inline' );
Array.map( document.getElementsByClassName( 'a' ), s == 'a' ? disp: none );
Array.map( document.getElementsByClassName( 'b' ), s == 'b' ? disp: none );
Array.map( document.getElementsByClassName( 'c' ), s == 'c' ? disp: none );
};
})();
No.4
- 回答日時:
element.style.display = '';
は、おかしい(そうだ)。
document.getElementsByClassName
をつかうとか
element.style.className = "a b d";
みたいにふくすうできるのだから、それもかんがえようよ。
No.3
- 回答日時:
クラス名が設定されていない要素は表示のままでいいのですよね?
パフォーマンスなどについては他の方のご意見に賛成。しっかりした回答もあるみたいなので、少々いい加減なものを…
>ちなみに他にもたくさんやり方とか教えていただけると~
ということなので、ご質問文にほぼ近い方法で。
function change(site){
if(!document.getElementsByTagName) return;
var i=0, e, objs = document.getElementsByTagName('*');
while (e = objs[i++]) e.style.display = (!e.className || site==e.className)?'':'none';
}
実用的に考えると、クラスの設定がこのためだけにされているとは思いにくいし、仮にそうだとしても、2つのクラスを同時に表示しておきたいとかいろいろありそうな気もする。
No.2
- 回答日時:
こんなのはだめ?
onloadのあとに。
ぜんかくくうはくは、はんかくにしてね。
var change = (function ( contains, display ) {
var tags = document.getElementsByTagName( '*' );
var classA = [ ];
var classB = [ ];
var classC = [ ];
var cnt = 0, element;
while( element = tags[ cnt++ ] ) {
contains( element, 'a' ) && classA.push( element );
contains( element, 'b' ) && classB.push( element );
contains( element, 'c' ) && classC.push( element );
}
return function ( sw, tp ) {
var c = 0;
var o;
if( 'undefined' === typeof tp )
tp = 'inline';
display( classA, 'a' === sw ? tp: 'none' );
display( classB, 'b' === sw ? tp: 'none' );
display( classC, 'c' === sw ? tp: 'none' );
};
})(
(function ( cut, has ) {
return function ( e, name ) {
if( !has( e.className, name ) ) {
var keys = cut( name );
var cnt = 0, key;
while( key = keys[ cnt++ ] )
if( !has( e.className, key ) )
return false;
}
return true;
};
})(
function (s) { return ('' + s).split( /\u0020+/ ); },
function (s, n) { return -1 < ( '\u0020' + s +'\u0020' ).indexOf( '\u0020' + n + '\u0020' ); }
),
function ( ary, css ) {
for( var cnt = 0, e; e = ary[ cnt++ ]; e.style.display = css );
}
)
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。 1 2023/06/25 11:51
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- JavaScript セレクトボックスで配列を呼び出したい。 1 2022/07/08 20:14
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript コードレビューをお願いします。 1 2022/07/16 05:38
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
スマフォではボタンを表示させ...
-
なぜmatchメソッドがエラーにな...
-
gas スプレッドシートがアクテ...
-
イラレでナンバリングする方法
-
ローカルにあるファイルを検索...
-
【JavaScript】数当てゲームを...
-
vb.netでの記述方法について 以...
-
gas 日付けの加算
-
var exports = exports || {}; ...
-
JavaScriptで平日のみをカウン...
-
GASのエラー「undefined からプ...
-
1日1回だけ引けるjavascriptお...
-
C#OpenCv V4にのエラーに関する...
-
ASP.NETのコントロールの値をJa...
-
jsによって検索プルダウン、都...
-
GASでundefinedエラーが出ます
-
JavaScript でのリアルタイム時...
-
翌月を取得するGASが分かりません
-
nullまたはオブジェクトではあ...
-
極小コードに挑戦!part2 数列...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
var exports = exports || {}; ...
-
google apps scriptの終了のさせ方
-
C#OpenCv V4にのエラーに関する...
-
GASでundefinedエラーが出ます
-
ジェネレーターの作り方
-
GASでGoogleフォームの自動返信...
-
HTMLで作った時報アプリが動き...
-
javascriptでテーブルに追加し...
-
html javascript リンク先アド...
-
【西暦等の変換】
-
ローカルにあるファイルを検索...
-
ASP.NETのコントロールの値をJa...
-
なぜmatchメソッドがエラーにな...
-
翌月を取得するGASが分かりません
-
gas スプレッドシートがアクテ...
-
ASP.NET MVCでObjectをjsに渡す
-
カンマで終わってるのはセミコ...
-
JavaScriptで文字列の特定文字...
-
javascriptでiframeのURL変更は?
-
APIを使って埋め込んだグーグル...
おすすめ情報