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

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

ただいまの
回答率

90.34%

  • JavaScript

    17531questions

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

  • C#

    7705questions

    C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

  • jQuery

    7110questions

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

  • HTML5

    4300questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • ASP.NET MVC Framework

    69questions

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

オブジェクトの属性を書き換えた際のツールチップ表示の不具合

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 221

sanezane

score 55

 やりたいこと

RoomNo.のタブ切り替えに応じてMmodelに詰め込んである(RoomNo.ごとに分けてある)データをツールチップ表示させたい。(以下イメージ画像有り)

 現状

初期処理でRoomNo1のデータをオブジェクトに設定しており、それは期待通りの挙動を確認している。
問題は、タブ切り替えの際に表示が変わらない。
デベロッパーツールで切り替えた際のオブジェクトの属性の中身を確認したところ、属性については書き換わっていた。しかし、マウスオーバーした際にはNo1の属性が表示されてしまう。

TipperというjQueryプラグインを使用しており、jQueryの中でリフレッシュ的なメソッドを入れてあげないといけない?のかと思うが、そこの調査で詰まってしまっています。
お力をお貸しください。
以下、環境情報と仕様イメージなど

環境情報
フレームワーク:Asp.net mvc .NETFramework
データベース:Postgresql
jQueryバージョン情報:3.3.1
OS:windows7
.NET:4.6.2
Visual Studio:visual studio2017

イメージ説明
Box1にカーソルを合わせたときのイメージ(カーソル写ってなくてごめんなさい。)
Box1とは座標で言うと0,0です。
Box(1~6の四角)最大48個
表示パターンが2種類あり、奇数がBox24個,偶数が48個(画像はパターン2)
各Boxに最大2つのグッズ名称が入る
名称が入っていなくてもレコードは必ず存在している(空文字)
名称が1つの場合はそのまま表示,2つの場合は/で結合0の場合は空文字。

加工前の基データのイメージ。このデータをRoomNo.別に振り分けたものがList1~5
![]

Model
/****************基データの入れ物GoodsMeisho****************/
public IEnumerable<GoodsMeishoViewModel> GoodsMeisho { get; set; }

//各架番号用のリスト
        public List<string> List1 { get; set; }
        public List<string> List2 { get; set; }
        public List<string> List3 { get; set; }
        public List<string> List4 { get; set; }
        public List<string> List5 { get; set; }

 public class GoodsMeishoViewModel
    {
        ///<summary>
        ///部屋番号
        ///</summary>
        public int Ganum { get; set; }
        //ボックス通番
        public int Boxtsuban { get; set; }

        //グッズ通番
        public int Goodstsuban { get; set; }

        //グッズ名称
        public string Goodsmeisho { get; set; }
    }



        ///<summary>
        ///リスト番号(Room番号)を返す
        ///</summary>

        public List<string> GetList(int Roomnum)
        {
            List<string> tmpList = new List<string>();
           if(Roomnum == 1)
            {
                tmpList = List1;
            }
           else if(Roomnum == 2)
            {
                tmpList = List2;
            }else if(Roomnum == 3)
            {
                tmpList = List3;
            }else if(Roomnum == 4)
            {
                tmpList = List4;
            }else if(Roomnum == 5)
            {
                tmpList = List5;
            }

            return tmpList;
        }

    //各Roomへ名称をセットする処理
      public void SetList()
        {
            List1 = new List<string>();
            List2 = new List<string>();
            List3 = new List<string>();
            List4 = new List<string>();
            List5 = new List<string>();

            //Goodsmeisho(IEnumerable<GoodsMeishoViewModel>)よりセット
            //foreach (var item in Goodsmeisho)
            //1つのユニットに2つの名称のレコードがあるので2ずつのインクリメント
            for (int i = 0; i < Goodsmeisho.Count(); i = i + 2)
            {
                //Room番号の判定
                if (Goodsmeisho.ElementAt(i).Roomnum == 1)
                {//RoomNo1の軌道名称を入れる
                 //結合させる
                    var tmp = Goodsmeisho.ElementAt(i).GoodsMeisho;
                    var tmp2 = Goodsmeisho.ElementAt(i + 1).GoodsMeisho;
                    //null判定
                    if (tmp == "")
                    {
                        if (tmp2 == "")
                        {
                            List1.Add("");
                        }
                        else
                        {
                            List1.Add(tmp2);
                        }
                    }
                    else
                    {
                        if (tmp2 == "")
                        {
                            List1.Add(tmp);
                        }
                        else
                        {
                            List1.Add(tmp + '/' + tmp2);
                        }
                    }
                }
                else if (Goodsmeisho.ElementAt(i).Roomnum == 2)
                {//RoomNo2のグッズ名称を入れる
                 //結合させる
                    var tmp = Goodsmeisho.ElementAt(i).GoodsMeisho;
                    var tmp2 = Goodsmeisho.ElementAt(i + 1).GoodsMeisho;
                    if (tmp == null)
                    {
                        if (tmp2 == "")
                        {
                            List2.Add("");
                        }
                        else
                        {
                            List2.Add(tmp2);
                        }
                    }
                    else
                    {
                        if (tmp2 == "")
                        {
                            List2.Add(tmp);
                        }
                        else
                        {
                            List2.Add(tmp + '/' + tmp2);
                        }
                    }
                }
//これをNo.5まで冗長に記述している。実はこれもシンプルにしたかったり。。。優先度は低め
コントローラ初期処理

public ActionResult Index()
        {
            var model = this.CreateModel<AModel>();
            // セッションよりNpgsqlConnectionを取得
            NpgsqlConnection dataConnector = (NpgsqlConnection)Session["dataConnector"];

            // DBオープン
            dataConnector.Open();
             model.GoodsMeisho = GetGoodsName(dataConnector);

             model.SetList();

            dataConnector.Close();

            return View(model);

        }

 ///<summary>
        ///グッズ名称の取得
        ///<param name="formCollection">Viewから受け取ったパラメータ</param>
        ///</summary>
        private IEnumerable<GoodsMeishoViewModel> GetGoodsName(NpgsqlConnection dataConnector)
        {
            List<GoodsMeishoViewModel> goodsMeishos = new List<GoodsMeishoViewModel>();

            //グッズ名称を設定



            string sql = @"select room_num,box_tsuban, goods_tsuban, goods_meisho"
                        + " from グッズ名称マスタ"                    

            NpgsqlCommand cmd = new NpgsqlCommand(sql, dataConnector);

            NpgsqlDataAdapter da = new NpgsqlDataAdapter(cmd);
            DataSet myDS = new DataSet();
            da.Fill(myDS);
            DataTable dt = myDS.Tables[0];
            foreach (DataRow row in dt.Rows)
            {
                GoodsMeishos.Add(new GoodsMeishoViewModel()
                {
                    Roomnum = (int)row["room_num"],
                    Boxtsuban = (int)row["box_tsuban"],
                    Goodstsuban = (int)row["goods_tsuban"],
                    Goodsmeisho = row["goods_meisho"].ToString()
                });


            }
            return goodsMeishos;
        }
View

 $(function () {
 var List1 = {};
            @for (int i = 0; i < Model.List1.Count(); i++)
             {
               @:List1[@i] = '@Model.List1[i]';
             }


            for (var index in List1)
            {
               var num = Number(index) + 1;
        //各Boxに振り分けているid(P01~P48)
                var id = "#P" + (('00' + (num)).slice(-2));
                $(id).attr('data-title', (List1[index]));


            }
//tipperというプラグインのメソッドでマウスオーバーを実現している
            $('.PA').tipper({
            direction: "top"});




            /************************************** タブクリック時のイベント ******************************/

            // Roomタブ押下時(タブオブジェクトにclass="Tabs"を設定)...ちなみにタブ含むすべてのオブジェクトはブートストラップではなく絵(SVG要素)でそれらしく見せている。
            $('.Tabs').on('click', function (e) {

                $("#RonnumSelected").val(0);

         /* 押下したボタンから架番号を取得する */
                // ボタンのIDを取得
                var RoomNumber = e.currentTarget.id;

                // 取得した部屋番号をフォーム情報にセット(FormCollectionでControllerへ渡すためのもの)
                $('#RoomSelected').val(RoomNumber)




                // Room番号に応じて、パターン1またはパターン2を表示
                /* ※現時点では[奇数:パターン1],[偶数:パターン2] */
                if (1 == (paNumber % 2)) {
                    // パターン1を表示、パターン2を非表示
                    $('#PATTERN1').show();
                    $('#PATTERN2').hide();

                else {
                    // パターン1を非表示、パターン2を表示
                    $('#PATTERN1').hide();
                    $('#PATTERN2').show();


                //取得した部屋番号に応じた軌道名称リストをセット
                //Boxのid はP01~P48
                if (RoomNumber == 1)
                {
                    var List1 = {};
                  @for (int i = 0; i < Model.List1.Count(); i++)
                   {
                  @:List1[@i] = '@Model.List1[i]';
                   }
                    for (var index in List1)
                    {
                        var num = Number(index) + 1;
                        var id = "#P" + (('00' + (num)).slice(-2))
                        $(id).attr('data-title', (List1[index]));
                    }

                }
                else if (RoomNumber == 2)
                {
                    var List2 = {};
                  @for (int i = 0; i < Model.List2.Count(); i++)
                   {
                  @:List2[@i] = '@Model.List2[i]';
                   }
                    for (var index in List2)
                    {
                        var num = Number(index) + 1;
                        var id = "#P" + (('00' + (num)).slice(-2));
                        $(id + "_P2").attr('data-title', List2[index]);
                    }
                }

               //これもNo5まで冗長に書いている

//グッズ名称を出したいオブジェクトに設定しているclass = 'Name'
                $('.Name').tipper({
//このtipperというメソッドでマウスオーバーでの表示を実現する
                    direction: "top"
                });


            });
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • SurferOnWww

    2018/07/07 14:28

    自分のハンドル名を変えましたか?

    キャンセル

  • sanezane

    2018/07/07 14:53

    それは、本質問をご回答いただくうえで必要な情報でしょうか。必要とあればお答えします。

    キャンセル

  • SurferOnWww

    2018/07/07 16:21

    マナー的には変えた場合は、その旨書くべきと思いますけど。信用されないという結果を生むかもしれませんよ。

    キャンセル

  • sanezane

    2018/07/07 18:37

    不快な思いをさせてしまったようでしたら申し訳ございませんでした。

    キャンセル

まだ回答がついていません

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

  • ただいまの回答率 90.34%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • JavaScript

    17531questions

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

  • C#

    7705questions

    C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

  • jQuery

    7110questions

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

  • HTML5

    4300questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • ASP.NET MVC Framework

    69questions

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