■期待する動作
オブジェクトにグッズ名称を設定してポップアップで表示させたい。イメージ以下画像。
現状、No1を指定して表示していますが、No.2,3とユーザー側で変更した際の
制御を実装できないでいます。
No2,3をクリックし、そのオブジェクトに設定している値を取るところまではできていますが、そこからのオブジェクトとの紐付けで詰まってしまっています。
・オブジェクトとデータの構造について
・オブジェクトはSVG要素で作られており、data-title属性をattrにて付与します。
$('#オブジェクト').attr(data-title,グッズ名称)
・以下のようにgoods_meishoを取得、編集したい。
イメージとしてはグッズを管理している大きな棚をroomとしており、その中にある箱をbox、
箱の中には最大2件のgoodsmeishoが入る。2件入っている場合は/で結合。1つの場合はそのまま。無しの場合は空白で出力したい。
・データの格納のイメージと表示のイメージを以下に示します。
情報の整理がついていませんが、お力をお貸しいただけますと幸いです。
環境情報
フレームワーク:Asp.net mvc .NETFramework
データベース:Postgresql
jQueryバージョン情報:3.3.1
OS:windows7
.NET:4.6.2
Visual Studio:visual studio2017
・コントローラー
///<summary>
///グッズ名称取得
///</summary>
private IEnumerable<GoodsModel.GoodsMeishoViewModel> GetGoodsName(NpgsqlConnection dataConnector)
{
List<GoodsModel.GoodsMeishoViewModel> GoodsMeishos = new List<GoodsModel.GoodsMeishoViewModel>();
//テスト用の値
string Type_cd = "A";
int box_tsuban = 1;
int goods_tsuban = 1;
string sql = @"select box_tsuban, goods_tsuban, goods_meisho"
+ " from master.グッズ名称マスタ where Room_cd = :RoomCd and Type_cd = : TypeCd and box_tsuban = :Box_tsuban and goods_tsuban = :Goods_tsuban";
NpgsqlCommand cmd = new NpgsqlCommand(sql, dataConnector);
cmd.Parameters.Add(new NpgsqlParameter("kikishitsuCd", NpgsqlDbType.Text));
cmd.Parameters.Add(new NpgsqlParameter("TypeCd", NpgsqlDbType.Text));
cmd.Parameters.Add(new NpgsqlParameter("Box_tsuban", NpgsqlDbType.Integer));
cmd.Parameters.Add(new NpgsqlParameter("Goods_tsuban", NpgsqlDbType.Integer));
cmd.Prepare();
cmd.Parameters["RoomCd"].Value = Session["RoomCode"].ToString();
cmd.Parameters["TypeCd"].Value = Type_cd;
cmd.Parameters["Box_tsuban"].Value = goods_tsuban;
cmd.Parameters["Goods_tsuban"].Value = goods_tsuban;
using (NpgsqlDataReader dr = cmd.ExecuteReader())
{
while (dr.Read())
{
GoodsMeishos.Add(new GoodsModel.GoodsMeishoViewModel()
{
boxtsuban = (int)dr["box_tsuban"],
goodstsuban = (int)dr["goods_tsuban"],
goodsmeisho = dr["goods_meisho"].ToString()
});
}
return GoodsMeishos;
}
・Model
public class GoodsModel : 〇〇ModelBase
{
///<summary>
///グッズ名称をセット
///</summary>
public IEnumerable<GoodsMeishoViewModel> GoodsMeisho { get; set; }
public class GoodsMeishoViewModel
{
//box通番
public int boxtsuban { get; set; }
//グッズ通番
public int goodstsuban { get; set; }
//グッズ名称
public string goodsmeisho { get; set; }
}
・アクション
public ActionResult Index()
{
var model = this.CreateModel<GoodsModel>();
// セッションよりNpgsqlConnectionを取得
NpgsqlConnection dataConnector = (NpgsqlConnection)Session["dataConnector"];
// DBオープン
dataConnector.Open();
model.GoodsMeisho = GetGoodsName( dataConnector);
dataConnector.Close();
return View(model);
}
var GoodsList = {};
@for(int i = 0; i < Model.GoodsMeisho.Count(); i++ )
{
@:GoodsList[@i] = '@Model.GoodsMeisho.ElementAt(i).goodsmeisho';
}
for (var index in GoodsList)
{
var num = Number(index) + 1;
//グッズ名称オブジェクトのid(P01~...)
var id = "#P" + (('00' + (num)).slice(-2))
if (index < 24) {
$(id).attr('data-title', GoodsList[index]);
}
$(id + "_PT2").attr('data-title', GoodsList[index]);
}
//グッズ名称オブジェクト全てに付与しているクラス
$('.PA').tipper();
クリックされた値を取得する
//各部屋オブジェクトに付与しているclass
$('.Rooms').on('click', function (e) {
/* 押下したボタンから部屋番号を取得する */
// ボタンのIDを取得
var selectRoom = e.currentTarget.id;
// ID情報から架番号を取得
// 取得した架番号をフォーム情報にセット
$('#RoomnumSelected').val(paNumber)
}
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
+1
カスタム属性(data-xxx)にセットした値をマウスオーバーでヒント表示(ツールチップ)させる、といった挙動でよかったでしょうか。
ツールチップはCSSやjs(jQuery)の細かな挙動が必要となってきますので、下記ご参考下さい。
CSSやJavaScriptでツールチップを表示させる方法まとめ
jQueryでツールチップのプラグインを自作しよう – Part1
また、「jQuery 吹き出し プラグイン」や「ツールチップ プラグイン」で検索すると色々と出てきますので、試されても良いかと思います。ちなみにballoon.jsやTooltipster等使いやすいかと思います。
-- 追記です。
boxも要素としているかと思いますが、であればboxとgoodsは親子関係ということですね。
案1) boxをマウスオーバーした際に、その子要素(goods)を取得し、成形後、ポップアップにツールチップに使用
jQueryで子要素を取得
案2) Modelでデータを生成する際に、boxでポップアップさせるようのデータも生成し、view生成時にboxの属性にセット
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう!
- ただいまの回答率 88.11%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
質問への追記・修正、ベストアンサー選択の依頼
f_horizon
2018/07/05 11:47
ご質問の「No2,3をクリック」とは図のどこをクリックするのでしょうか。またタイトルにあるマウスオーバーではなく、クリックなのでしょうか。
sanezane
2018/07/05 14:14
Noとはroom番号のことを言っています。イメージとしてはroom番号タブがあってroomが切り替わり、それと同時にboxに入っているグッズ名称も変わるといった仕様です。roomの中にboxがあり、boxのなかにgoodsが最大2つ入るという仕様です。クリックでroomが遷移するようタブが設けてあります。boxをマウスオーバーするとその中に入っているgoods名称がポップアップ表示されるという仕様です。