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

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

ただいまの
回答率

90.32%

  • JavaScript

    17548questions

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

  • C#

    7714questions

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

  • jQuery

    7116questions

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

  • SVG

    103questions

    SVGは、XMLを基盤とした2Dベクター画像記述言語。画像を線・面といった図形の集合体として扱うベクター画像のため、環境に適した表示が可能です。アニメーション機能もサポートされており、簡単なインタラクティブコンテンツ作成もできます。

オブジェクトの属性変更が画面に反映されない。(オブジェクトのリフレッシュ)

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 220

sanezane

score 55

当方の解決していない質問の中の、フロントにフォーカスした質問です。
情報が足りないようでしたらController,Model等もコード追加します。
部屋番号というタブがありまして、タブをクリックするごとに部屋に入っているオブジェクトの属性(内容)を切り替え、マウスオーバーでツールチップ表示したい。という仕様です。

タブクリックするごとにオブジェクトの情報が書き換わることはデベロッパーツールにて確認済みだが、画面に反映されない。
reloadは初期の値に戻ってしまうので意味がない。reloadの使い方に問題アリ?
オブジェクトをリフレッシュして属性を更新する的機能はありませんか?
ちなみにTipperというjQueryプラグインを使ってツールチップ表示を表現しております。
コード最後のtipper()にてマウスオーバーでデータが表示されます。
以下コード内情報

・Number...部屋番号
・List1...部屋番号1に対応するデータをまとめたものをモデルより呼び出し
・#gP...名前が入っているオブジェクト#gP01~#gP24(これを更新したい)
・.P...#gP01~#gP24に付与しているクラス(ツールチップ表示に使用)
・data-title属性を書き換えています。

(c# asp.net Index.cshtml)
  if (Number == 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 = "#gP" + (('00' + (num)).slice(-2))
                        $(id).attr('data-title', (List1[index]));
                    }
                    $('.P')
                }


このブロックがif(Number==5)まであります。
オブジェクトをリフレッシュする方法があれば、ご教授いただければ幸いです。

今回、オブジェクトをSVGファイルで管理していまして、htmlにつきましてはそのファイルを読み込むという形をとっています。ですので該当オブジェクトに関するSVGファイルの内容をご提示します。
初期表示時に上記コードを入れていますので初期表示時はgタブにdata-titleが入っています。

 <g
                 class="P"
                 //クラス
                 id="gP4"
                 //ID
                 transform="translate(-0.5291751,-3.4683591e-6)">
                <rect
                   style="display:inline;fill:#b3b3b3;fill-opacity:1;stroke:#000000;stroke-width:0.07969642;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
                   id="P4_rect"
                   width="7.55512"
                   height="18.46151"
                   x="84.945335"
                   y="174.39366" />
                <text
                   xml:space="preserve"
                   style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:4.60198593px;line-height:1.25;font-family:'MS Gothic';-inkscape-font-specification:'MS Gothic, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;display:inline;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26413709"
                   x="87.434586"
                   y="185.37314"
                   id="P4_text"
                   transform="scale(1.0001351,0.99986491)"><tspan
                     id="tspan1324-3-6-4-7-0-7"
                     x="87.434586"
                     y="185.37314"
                     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:4.60198593px;font-family:'MS Gothic';-inkscape-font-specification:'MS Gothic, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;stroke-width:0.26413709">4</tspan></text>
              </g>

追記*************************************************************
プラグインをdarktooltipというものに変更したところ切り替わることを確認できました。
しかし、切り替える前のツールチップが現データ表示のツールチップの後ろに出てしまうという事象が発生しています。イメージ画像追加。
メモリのことを考えると現時点のツールチップ以外は出したくないので、切り替える以前のツールチップのオブジェクトを破棄するのになにか良い方法はありますでしょうか。
私にはスキル不足で出来ませんが、プラグインを少しイジれば古いオブジェクトは消せるよー、っていう場合はご教授願います。
以下、プラグインのURLです。
リンク内容
イメージ説明

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • sanezane

    2018/07/09 10:05

    承知しました。

    キャンセル

  • mts10806

    2018/07/09 10:09

    JavaScriptなら私も可能かなと思って質問内容見てみたらちょっと事情が違ったようなので、分かりそうな人が見てもらえるように修正してもらいました。お力になれずすみません。

    キャンセル

  • sanezane

    2018/07/09 10:14

    いえいえ。ありがとうございます。c#といれると見てももらえないかと思ってあえて外してました。笑

    キャンセル

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

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

  • JavaScript

    17548questions

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

  • C#

    7714questions

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

  • jQuery

    7116questions

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

  • SVG

    103questions

    SVGは、XMLを基盤とした2Dベクター画像記述言語。画像を線・面といった図形の集合体として扱うベクター画像のため、環境に適した表示が可能です。アニメーション機能もサポートされており、簡単なインタラクティブコンテンツ作成もできます。