質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

ASP.NET MVC Framework

ASP.NET MVC Frameworkは、MVCパターンをベースとした、マイクロソフトのウェブアプリケーション開発用のフレームワークです。

Q&A

解決済

4回答

4611閲覧

連番のidを繰り返し操作したい。jqueryでの繰り返し文

sanezane

総合スコア91

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

ASP.NET MVC Framework

ASP.NET MVC Frameworkは、MVCパターンをベースとした、マイクロソフトのウェブアプリケーション開発用のフレームワークです。

0グッド

0クリップ

投稿2018/06/04 09:36

編集2018/06/04 10:12

そもそも

svgタグで描いた絵にタブ機能(のようなもの)を実装したい。
タブの絵は10個既に描いてあり、DBからタブ数の情報を取得する。取得した数分のタブを表示したい。
※初期表示時は全て非表示

javascript

1//初期表示時非表示 2 $(function () { 3 $('.Tab').hide(); 4 5 });

svgのイメージ(そのまんま記述するととても長いのでイメージで)

html

1<svg ..... 2<g id=Tabs> 3 <g id=Tab1 4 <rect ............/rect>/g> 5 <g id=Tab2 6 <rect ............/rect>/g> 7 <g id=Tab3 8 <rect ............/rect>/g> 9 10 ...</svg>

まずは

引数で受け取った数分のタブを表示したい。
idは連番で振ってあるのでfor文?で1ずつshowし、受け取った数を超えたら終了。

現状。コードが思いつかない。。。。

各タブid : Tab1~Tab10

$(function(){
//タブにしたいclassに命名したクラス名を繰り返し処理
$('.Tabs').each

//idとnumを足してidを完成させ、要素にshowを追加する
$this.attr({id: '' + idNum});
}
すみません。どうかご教授願います。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

root_jp

2018/06/04 10:03

「引数で受け取った数分のタブを表示したい。」とありますが、引数でどんな内容を受け取りたいんでしょうか?
root_jp

2018/06/04 10:05

.Tabs と .Tab の関係性が分かるように、svgタグをどのように配置しているかのHTMLもあると回答がつきやすいと思います。
sanezane

2018/06/04 10:07

タブの数の情報(int)を受け取りたいです。
guest

回答4

0

「DBからタブ数の情報を取得する」というのと「引数で受け取った数分のタブを表示」というのが矛盾するような気がしますが、そのあたりはどう考えればいいのですか?

何にせよ、ASP.NET MVC の web アプリの話と理解していますが、そうであれば、アクションメソッドの引数として「数」を受け取って、受け取った後 View でその数だけ svg 画像を表示するようにコーディングするようにしてはいかがですか?

DB から「数」を取得する場合でも、アクションメソッドで DB から「数」を取得し、数だけ svg 画像を表示するように View をコーディングすれば可能なような気がしますけど?

投稿2018/06/05 03:23

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sanezane

2018/06/05 09:27

いつもお世話になっております。 本当のところはDBから取りたいのですが、DBが構築されておらず、まずはView側で形だけ実装したい。というのが今回の意図でした。 DBから数を取得することについてはまだ検証していないのですが、おそらくまたお世話になると思います。。。できるだけ自分で調べますが、その時はご教授お願いいたします。
退会済みユーザー

退会済みユーザー

2018/06/05 09:36

DB からデータを取得するという最終的な形を考えた上で、その形に沿って今の質問の実装を考えて質問しているでしょうか?
sanezane

2018/06/05 10:26

dbから数字を取るのがそんなに実装に違いが出るとは思いませんでした。とりあえず形を作ってみたかったのですが、 では、仮のdb作ってasp.net mvcで実装してみますね。
guest

0

$('.Tab').hide();と書かれているので、
タブにはそれぞれclass="Tab"が振られているということでいいですね?

タブが連番通りに並んでいる場合

JavaScript

1function showTab(tabCount) { 2 $(".Tab:lt(" + tabCount + ")").show(); 3}

タブが連番通りに並んでいない場合

JavaScript

1function showTab(tabCount) { 2 for (var i = 1; i <= tabCount; i++) { 3 $("#Tab" + i).show(); 4 } 5}

投稿2018/06/04 12:36

編集2018/06/04 12:40
root_jp

総合スコア4666

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sanezane

2018/06/05 09:21

ありがとうございます! root_jpさんのコードを参考に:li()を使って実装したら期待した結果になりました。 大変助かりました!
guest

0

ベストアンサー

あらかじめ最大数のタブがあって適宜必要なもの以外を非表示ないしは削除したい、
ということならば必要なのはこれかな?

:gt()

投稿2018/06/04 10:35

KazuhiroHatano

総合スコア7802

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sanezane

2018/06/05 09:19

ありがとうございます。KazuhiroHatano さんのヒントを参考に、:lt()を使って実装しました。 大変助かりました!
guest

0

試してないですが…

html

1<svg class="tab"></svg> 2<svg class="tab"></svg> 3<svg class="tab"></svg> 4<svg class="tab"></svg> 5<svg class="tab"></svg> 6 7 8<script> 9$('.tab').each(function(){ 10 $(this).show(); 11}); 12</script>

みたいな感じ…?

投稿2018/06/04 09:59

編集2018/06/05 03:42
nnahito

総合スコア2004

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sanezane

2018/06/05 02:09

nnahitoさん ありがとうございます! 繰り返しでタブを表示させることはできました! 参考にさせていただきます! 勉強になります!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問