读取json并显示鼠标上的动态值

Requirement is to read Json object and the value should be shown on mouse over a tooltip. Please find the code in http://jsfiddle.net/8WKTj/49/

要求是读取Json对象，值应该显示在鼠标上的工具提示上。请在http://jsfiddle.net/8WKTj/49/找到代码

Below is the JSON code:

下面是JSON代码:

jsonDataFile.js

{ 
  "Column1": "This represents transID",
  "Column2": "This represents Spread percentage",
  "Column3": :" Column3 title description";
}

javascript:

$(function()
        {
           $(".question").each(function(index)
            {
              $.getJSON("js/jsonDataFile.js",function(result){
                  $.each(result, function(i, field){
                      alert(" i: " + i +" ,"+ field); //prints i: column1 ,This represents transID 
                                  //i: column2 , This represents Spread percentage
                      $(this).prop('title', result[index]);
                  });
              });

            });
        });

When i mouse over on column1, tooltip should display the message "This represents transID" . Similarly when mouse overon column2 , tooltip should display "This represents Spread percentage"...I have tried reading json file and show message on tooltip as above but output is not as expected. It's not showing anything onmouse over. Please suggest.

当我在column1上单击时，工具提示应该显示消息“This代表transID”。类似地，当鼠标在column2上停留时，工具提示应该显示“这表示传播百分比”……我试过像上面一样读取json文件并在工具提示上显示消息，但是输出没有预期的那样。它没有显示任何onmouse。请建议。

1 个解决方案

#1

1) Why you are reading SINGLE(!) static JSON from network for EACH question? It's far mor correct to reverse logic and BIND QUESTIONS FROM JSON, and not BIND JSON TO QUESTIONS, especially because getJSON is async by nature instead of $(..).each

1)为什么每个问题都要从网络读取单个(!)静态JSON ?反向逻辑并将问题绑定到JSON，而不将JSON绑定到问题上，这是非常正确的，特别是因为getJSON本质上是异步的，而不是$(..).each

2) Never use alert() - it locks main thread of JS and is real crasher for debugging - use console.log or console.debug for printing debug information (!) - to see such messages U should launch embeded browser console or something like FireBug

2)永远不要使用alert()—它锁住JS的主线程，是调试的真正的crasher—使用控制台。用于打印调试信息(!)——看到这样的消息，你应该启动嵌入式浏览器控制台或类似FireBug的东西。

3) Split logic to readable functions like applyQuestion(element, resultItem){}

3)将逻辑分割为可读函数，如applyQuestion(元素，resultItem){}

4) Cache arrays in variables

4)在变量中缓存数组。

So here is pseudocode with normal logic (should be like this)

这是具有正常逻辑的伪代码(应该是这样)

$(function(){
    var applyQuestion = function(e, result){/* 
    here logic to setup element with item
    and as a part of it - you can setup "mouseoverevent" with some things from result
    */};
    var questionElements = $(".question");
    $.getJSON(url, function(result){
        questionElements.each(
            function(e){ applyQuestion(e,result);}
        )
    });

})();

So it's much clear and can be translated to human language "on the start, load json file and as it loaded store it's data into target elements by standard binding funcion"

这很清楚，可以翻译成人类语言"首先，载入json文件，载入存储时数据被标准绑定函数载入目标元素"

1 个解决方案

#1

更多相关文章

随机推荐