Question

当我点击具有不同div的{{1}}时，我正试图获取数据对象，这是一些示例：

attribute

点击<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> var a = { "from Japan" : {"air" : "1 hour 30 min", "train" : null, "bus" : null}, "from HongKong" : {"air" : "1 hour 45 min", "train" : null, "bus" : null}, "from Taiwan" : {"air" : "2 hour 10 min", "train" : null, "bus" : null} } var b = { "from Japan" : {"air" : "1 hour 20 min", "train" : "3 hour 20 min", "bus" : null}, "from HongKong" : {"air" : null, "train" : null, "bus" : null}, "from Taiwan" : {"air" : null, "train" : null, "bus" : null} } var c = { "from Japan" : {"air" : null, "train" : "2 hour 20 min", "bus" : "7 hour 25min"}, "from HongKong" : {"air" : null, "train" : null, "bus" : null}, "from Taiwan" : {"air" : null, "train" : null, "bus" : null} } var d = { "from Japan" : {"air" : null, "train" : "1 hour 36 min", "bus" : "5 hour 27min"}, "from HongKong" : {"air" : null, "train" : null, "bus" : null}, "from Taiwan" : {"air" : null, "train" : null, "bus" : null} } $('#hoge ul li').click(function() { var place = $(this).attr('title'); var message = ""; message += "<b>From Japan</b>" + '<br />'; message += fromArea(place.Japan); message += "<b>From HongKong</b>" + '<br />'; message += fromArea(place.HongKong); message += "<b>From Taiwan</b>" + '<br />'; message += fromArea(place.Taiwan); $('#fuga').html( message ); function fromArea(location) { var output = ""; if(location.air != null){ output += 'Airplane : ' + location.air + '<br />'; } if(location.train != null){ output += 'Train : ' + location.train + '<br />'; } if(location.bus != null){ output += 'Bus : ' + location.bus + '<br />'; } return output; } }); </script> <div id="hoge"> <ul> <li title="a"> Place A </li> <li title="b"> Place B </li> <li title="c"> Place C </li> <li title="d"> Place D </li> </ul> </div> <div id="fuga"></div>

时的预期结果

来自日本

飞机：1小时30分钟

来自香港

飞机：1小时45分钟

来自台湾

飞机：2小时10分钟

点击title="a" title="b" title="c"

时，我想得到不同的结果

然而我无法从不同的标题中获取数据..... 请给我一个想法？

加入

由于我得到了正确的结果，我想开发这个插件。

如果任何区域的结果为null，我想隐藏fromArea消息。

示例：

当前结果

title="d"

到

From Japan
Train : 1 hour 36 min
Bus : 5 hour 27min
From HongKong
From Taiwan

另一次更新

我试过@vrluckyin的方法，但我的数据对象似乎有问题.....？！？！

＆＃13;

From Japan
Train : 1 hour 36 min
Bus : 5 hour 27min

＆＃13;

var Hokkaido = {
        'Tokyo' : {'air' : '1 hour 30 min', 'train' : null, 'bus' : null},
        'Osaka' : {'air' : '1 hour 45 min', 'train' : null, 'bus' : null},
        'Fukuoka' : {'air' : '2 hours 10 min', 'train' : null, 'bus' : null},
}
var Aomori = {
        'Tokyo' : {'air' : '1 hours 20 min', 'train' : '3 hours 20 min', 'bus' : null},
        'Osaka' : {'air' : null, 'train' : null, 'bus' : null},
        'Fukuoka' : {'air' : null, 'train' : null, 'bus' : null}
}

var Iwate = {
        "Tokyo" : {"air" : null, "train" : "2 hours 20 min", "bus" : "7 hours 25 min"},
        "Osaka" : {"air" : null, "train" : null, "bus" : null},
        "Fukuoka" : {"air" : null, "train" : null, "bus" : null}
}

var Miyagi = {
        "Tokyo" : {"air" : null, "train" : "1 hour 36 min", "bus" : "5 hours 27 min"},
        "Osaka" : {"air" : null, "train" : null, "bus" : null},
        "Fukuoka" : {"air" : null, "train" : null, "bus" : null}
}

$('#hoge ul li').click(function() {

  var place = $(this).attr('title');
  if (place != undefined) {
    var message = "";
    message += fromArea('Tokyo', place);
    message += fromArea('Osaka', place);
    message += fromArea('Fukuoka', place);
    $('#fuga').html(message);
  }

  function fromArea(name, location) {
    location = eval(location + '.' + name);
    var output = "";
    if(location.air != null) {
        output += 'Airplane : ' + location.air + '<br />';
    }
    if(location.train != null) {
        output += 'Train : ' + location.air + '<br />';
    }
    if(location.bus != null) {
        output += 'Bus : ' + location.air + '<br />';
    }
    if(output != "") {
        output = "<b> From " + name +"</b>" + "<br />" + output;
    }
    return output;
}
});

＆＃13;

Answer 1

您可能喜欢这个解决方案：

$('#hoge ul li').click(function() {
    var place = $(this).attr('title');
    var message = "";
        message = fromArea(place);
        $('#fuga').html( message );

    function fromArea(loc) {
        var name = "";
        var result = "";
        for (var key in a) {
            name = key;
            var location = eval(loc+'.'+name);
            var output = "";
            if(location.air != null){
                output += 'Airplane : ' + location.air + '<br />';
            }
            if(location.train != null){
                output += 'Train : ' + location.train + '<br />';
            }
            if(location.bus != null){
                output += 'Bus : ' + location.bus + '<br />';
            }
            if(output!=""){
                result += "<b>From "+name+ "</b>" + '<br />' + output;
            }

        }
        return result;
    }
});

Answer 2

这是因为该属性只是一个字符串，“a”，“b”，“c”等，而不是存储在具有相同名称的变量中的对象。因此，不是单独的变量使数据分离对象的属性，而是使用属性值作为键

var places = {
    a:{
        "Japan" : {"air" : "1 hour 30 min", "train" : null, "bus" : null},
        "HongKong" : {"air" : "1 hour 45 min", "train" : null, "bus" : null},
        "Taiwan" : {"air" : "2 hour 10 min", "train" : null, "bus" : null}
    },
    b:{
        "Japan" : {"air" : "1 hour 20 min", "train" : "3 hour 20 min", "bus" : null},
        "HongKong" : {"air" : null, "train" : null, "bus" : null},
        "Taiwan" : {"air" : null, "train" : null, "bus" : null}
    },
    c:{
        "Japan" : {"air" : null, "train" : "2 hour 20 min", "bus" : "7 hour 25min"},
        "HongKong" : {"air" : null, "train" : null, "bus" : null},
        "Taiwan" : {"air" : null, "train" : null, "bus" : null}
    },
    d:{
        "Japan" : {"air" : null, "train" : "1 hour 36 min", "bus" : "5 hour 27min"},
        "HongKong" : {"air" : null, "train" : null, "bus" : null},
        "Taiwan" : {"air" : null, "train" : null, "bus" : null}
    }
};

var key = $(this).attr('title');
var place = places[key];

另请注意，我取出了对象属性中的“from”部分，以便可以像place.Japan那样访问它们，否则您必须使用place["from Japan"]之类的括号表示法来正确获取属性。< / p>

演示

var places = {
  a:{
    "Japan" : {"air" : "1 hour 30 min", "train" : null, "bus" : null},
    "HongKong" : {"air" : "1 hour 45 min", "train" : null, "bus" : null},
    "Taiwan" : {"air" : "2 hour 10 min", "train" : null, "bus" : null}
  },
  b:{
    "Japan" : {"air" : "1 hour 20 min", "train" : "3 hour 20 min", "bus" : null},
    "HongKong" : {"air" : null, "train" : null, "bus" : null},
    "Taiwan" : {"air" : null, "train" : null, "bus" : null}
  },
  c:{
    "Japan" : {"air" : null, "train" : "2 hour 20 min", "bus" : "7 hour 25min"},
    "HongKong" : {"air" : null, "train" : null, "bus" : null},
    "Taiwan" : {"air" : null, "train" : null, "bus" : null}
  },
  d:{
    "Japan" : {"air" : null, "train" : "1 hour 36 min", "bus" : "5 hour 27min"},
    "HongKong" : {"air" : null, "train" : null, "bus" : null},
    "Taiwan" : {"air" : null, "train" : null, "bus" : null}
  }
};

$('#hoge ul li').click(function() {
    var key = $(this).attr('title');
    var place = places[key];
    var message = "";
        message += "<b>From Japan</b>" + '<br />';
        message += fromArea(place.Japan);
        message += "<b>From HongKong</b>" + '<br />';
        message += fromArea(place.HongKong);
        message += "<b>From Taiwan</b>" + '<br />';
        message += fromArea(place.Taiwan);
        $('#fuga').html( message );

    function fromArea(location) {
      var output = "";
      if(location.air != null){
        output += 'Airplane : ' + location.air + '<br />';
      }
      if(location.train != null){
        output += 'Train : ' + location.train + '<br />';
      }
      if(location.bus != null){
        output += 'Bus : ' + location.bus + '<br />';
      }
      return output;
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="hoge">
    <ul>
        <li title="a">
            Place A
        </li>
        <li title="b">
            Place B
        </li>
        <li title="c">
            Place C
        </li>
        <li title="d">
            Place D
        </li>
    </ul>
</div>

<div id="fuga"></div>

Answer 3

在json数据中进行一些修改后，此脚本可能会有所帮助：

http://jsfiddle.net/mdqmo25m/

var a = {
        "Japan" : {"air" : "1 hour 30 min", "train" : null, "bus" : null},
        "HongKong" : {"air" : "1 hour 45 min", "train" : null, "bus" : null},
        "Taiwan" : {"air" : "2 hour 10 min", "train" : null, "bus" : null}
}

var b = {
        "Japan" : {"air" : "1 hour 20 min", "train" : "3 hour 20 min", "bus" : null},
        "HongKong" : {"air" : null, "train" : null, "bus" : null},
        "Taiwan" : {"air" : null, "train" : null, "bus" : null}
}

var c = {
        "Japan" : {"air" : null, "train" : "2 hour 20 min", "bus" : "7 hour 25min"},
        "HongKong" : {"air" : null, "train" : null, "bus" : null},
        "Taiwan" : {"air" : null, "train" : null, "bus" : null}
}

var d = {
        "Japan" : {"air" : null, "train" : "1 hour 36 min", "bus" : "5 hour 27min"},
        "HongKong" : {"air" : null, "train" : null, "bus" : null},
        "Taiwan" : {"air" : null, "train" : null, "bus" : null}
}

    $('#hoge ul li').click(function() {
        var place = $(this).attr('title');
        var message = "";
            message += "<b>From Japan</b>" + '<br />';
            message += fromArea(eval(place+'.Japan'));
            message += "<b>From HongKong</b>" + '<br />';
            message += fromArea(eval(place+'.HongKong'));
            message += "<b>From Taiwan</b>" + '<br />';
            message += fromArea(eval(place+'.Taiwan'));
            $('#fuga').html( message );

        function fromArea(location) {
          var output = "";
          if(location.air != null){
            output += 'Airplane : ' + location.air + '<br />';
          }
          if(location.train != null){
            output += 'Train : ' + location.train + '<br />';
          }
          if(location.bus != null){
            output += 'Bus : ' + location.bus + '<br />';
          }
          return output;
        }
    });

修改

根据您的评论，按照您的预期在下方捕捉输出结果：

$('#hoge ul li').click(function() { var place = $(this).attr('title'); var message = ""; message += fromArea('Japan',place); message += fromArea('HongKong',place); message += fromArea('Taiwan',place); $('#fuga').html( message ); function fromArea(name,location) { location = eval(location+'.'+name); var output = ""; if(location.air != null){ output += 'Airplane : ' + location.air + '<br />'; } if(location.train != null){ output += 'Train : ' + location.train + '<br />'; } if(location.bus != null){ output += 'Bus : ' + location.bus + '<br />'; } if(output!="") { output = "<b>From "+name+ "</b>" + '<br />' + output; } return output; } });

Answer 4

下面的代码段会生成与您的案例匹配的输出。

注意：大多数人说eval是邪恶的，不是吗？

http://jsfiddle.net/gr95k75s/

var message = "";
        message += "<b>From Japan</b>" + '<br />';
        message += fromArea(eval(place+'["from Japan"]'));
        message += "<b>From HongKong</b>" + '<br />';
        message += fromArea(eval(place+'["from HongKong"]'));
        message += "<b>From Taiwan</b>" + '<br />';
        message += fromArea(eval(place+'["from Taiwan"]'));

在JavaScript或Json上获取不同的数据对象

4 个答案: