2015-02-25 2 views
1

Я пытаюсь получить объект данных, когда я нажимаю div, который имеет различную attribute и вот несколько примеров:Получение другого объекта данных на JavaScript или Json

<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> 

Ожидаемый результат, когда я нажимаю title="a"

Из Японии

Самолет: 1 час 30 мин

От Гонконг

Самолет: 1 час 45мин

из Тайваня

Самолет: 2 час 10мин

Я хочу, чтобы получить разные результаты, когда я нажимаю title="b"title="c"title="d"

однако я не мог получить данные из разных заголовков ..... , пожалуйста, дайте мне представление?

добавил

Так как я получил правильный результат, я хотел бы развить этот плагин.

Мне нравится скрывать от сообщенияArea, если какая-либо из области имеет нулевой результат.

пример:

текущий результат

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

в

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

Другой Update

Я попытался @vrluckyin метод «s, но кажется, что что-то не так с мои объекты данных .....?!?!

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; 
 
} 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="hoge"> 
 
    <ul> 
 
    <li title='Hokkaido'> 
 
     Hokkaido 
 
    </li> 
 
    <li title='Aomori'> 
 
     Aomori 
 
    </li> 
 
    <li title='Iwate'> 
 
     Iwate 
 
    </li> 
 
    <li title='Miyagi'> 
 
     Miyagi 
 
    </li> 
 
    </ul> 
 
</div> 
 
<div id="fuga"></div>

+0

Проблема заключается в том, когда вы звоните 'fromArea (place.Japan)', 'place' не переменная' a' но строковое значение '' a ''. Поэтому 'place.Japan' будет неопределенным. – Arunster

ответ

0

Этот сценарий может быть полезным после небольшой модификации в ваших данных 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; 
    } 
}); 
+0

Ahhhh ... Я не добавлял 'eval()' к переменной. Теперь я понял, работал и благодарю вас. – Kazuaki

+1

Мне просто интересно, есть ли в любом случае, что я могу упростить результат? Если какой-либо из атрибутов fromArea имеет значение «null», я также не хочу отображать имя области. Любой совет будет оценен. – Kazuaki

+0

Благодарим за обновление. Я обновил результат, но похоже, что что-то не так с моими объектами данных ..... Я думаю, что они действительны. нет? – Kazuaki

1

Это происходит потому, что атрибут просто будет строка «а», «б», «в» и т.д. не объект, хранящийся в переменной с тем же именем , Таким образом, вместо того, чтобы отдельные переменные делают данные отдельные свойства объекта и использовать значение атрибута в качестве ключа

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]; 

Также обратите внимание, я вынул «из» частей в свойствах объекта, так что они могут быть доступны как place.Japan в противном случае вам нужно будет использовать скобку, например place["from Japan"], чтобы правильно получить свойства.

Demo

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>

+0

Ударьте меня на кнопку отправки, но вы покрыли все, что я хотел написать, и многое другое! Хороший ответ! – Arunster

0

Ниже фрагмент коды генерирует выходной сигнал, который соответствует вашему делу.

ПРИМЕЧАНИЕ. Большинство людей говорят, что 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"]')); 
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; 
    } 
}); 
+1

это очень чистый код. как определить атрибуты заголовка? – Kazuaki

Смежные вопросы