Question

我有一个Javascript代码来计算到两个目的地的下一个教练。我认为我写的一切都还可以，但是当我加入网站时，我必须点击标签查看信息。为什么默认情况下不显示它？另外，有没有办法从URL访问一个选项卡（例如，如果我希望选项卡#c默认显示为活动状态，请转到url.com/index.php#c）？我的实际代码是：

// Timetable constructor, including the arrays of bus times
var Timetable = function(){
var campusMF = ["06:00", "06:30", "06:50", "07:05", "07:25", "07:55", "08:25", "08:40", "09:00", "09:25", "10:00", "10:20", "10:30", "11:15", "12:00", "12:10", "12:30", "13:00", "13:25", "14:00", "14:35", "14:50", "15:05", "15:25", "16:00", "16:20", "16:35", "17:00", "17:25", "18:05", "18:20", "18:35", "19:10", "20:00", "20:10", "20:35", "21:00", "21:25", "21:55", "22:10", "23:05"];
var campusSA = [];
var campusSU = [];
var leamMF = ["06:05", "06:45", "07:10", "07:35", "07:45", "08:05", "08:35", "09:05", "09:25", "09:40", "10:05", "10:40", "11:00", "11:20", "12:05", "12:40", "12:55", "13:10", "13:35", "14:05", "14:40", "15:05", "15:25", "15:40", "16:10", "16:40", "17:05", "17:20", "17:35", "18:05", "18:50", "19:15", "19:40", "20:05", "20:40", "20:55", "21:05", "21:35", "22:15", "22:45", "23:05"];
var leamSA = [];
var leamSU = [];

var today = new Date().toUTCString().slice(0, 16);

// Convert time strings to actual dates (doesn't work past midnight yet)
for(var i=0, l=campusMF.length; i<l; i++){
campusMF[i] = new Date(today+" "+campusMF[i]);
}
for(var i=0, l=leamMF.length; i<l; i++){
leamMF[i] = new Date(today+" "+leamMF[i]);
}

// This will be where we work out what timetable to use
var campus = campusMF;
var leam = leamMF;

// A variable for updating the time left automatically
var update = setTimeout($.noop, 0);

// The body of the Timetable object, returns a HTML string
// that will look nice on the page containing the time til
// the next bus at the given stop ('c' or 'l');
this.next = function(place){
clearTimeout(update); //Updating now so cancel the planned one
if(place == "l")
  var times = leam;
else
  times = campus;
var now = new Date();
var d; // Time to wait in mins
var next = '<span id="time">';
for(var i=0, l=times.length; i<l; i++){
  if(times[i].getTime() >= now.getTime()){
    d = (times[i].getTime()-now.getTime())/(1000*60);
    if(d >= 60)
      next += Math.floor(d/60)+"</span>hores i "+Math.round(d % 60)+" minuts.";
    else
      next += Math.round(d)+"</span> minuts.";
    break;
  }
}
var fn = arguments.callee;
var _this = this;
update = setTimeout(function(){
  document.getElementById('info').innerHTML = fn.call(_this, place);
},(d+0.5-Math.floor(d+0.5))*60*1000+1000);
// The time here makes it so an update happens at just gone 30
// seconds past each minute (when round actually changes the value)
return next;
}
}

// Lets use what we've built!
var timetable = new Timetable();

// Update the screen even if jquery isn't available for some reason
document.onready = function(){
document.getElementById('info').innerHTML = timetable.next('c');
}


$(document).ready(function(){
$('#c').click(function(){
  if($(this).hasClass('active'))
    return;
  document.getElementById('info').innerHTML = timetable.next('c');
  $(this).addClass('active')
         .siblings().removeClass('active');
});
$('#l').click(function(){
  if($(this).hasClass('active'))
    return;
  document.getElementById('info').innerHTML = timetable.next('l');
  $(this).addClass('active')
         .siblings().removeClass('active');
});
});

发布的网址是http://poldiloli.com/bus

Answer 1

我真的没有看到原因：

// Update the screen even if jquery isn't available for some reason
document.onready = function(){
document.getElementById('info').innerHTML = timetable.next('c');
}

您可以在$(document).ready(function(){});

中添加将您的时间表添加到信息元素中的部分

另一个简单的解决方案是向js添加一个新函数：

function showTimetable(){
    document.getElementById('info').innerHTML = timetable.next('c');
}

并在网站加载showTimetable

时在您的索引文件中调用<body onload="showTimetable()"> ...

据我了解您的问题 - 如果您使用网址参数访问您的网址可能会更容易。您访问DIR.TGN计划的链接将为http://poldiloli.com/bus/setmanal.php?plan=c

要做到这一点：

您可以向JS添加一个从URL读取GET / Source参数的函数。

var getUrlParameter = function getUrlParameter(sParam) {
    var sPageURL = decodeURIComponent(window.location.search.substring(1)),
    sURLVariables = sPageURL.split('&'),
    sParameterName,
    i;

    for (i = 0; i < sURLVariables.length; i++) {
       sParameterName = sURLVariables[i].split('=');

       if (sParameterName[0] === sParam) {
          return sParameterName[1] === undefined ? true : sParameterName[1];
       }
   }
}

然后，您只需将此功能添加到您的Javascript：

function loadPlan(){
   var plan = getUrlParameter('plan');
   var tt = new Timetable(); 

   if (plan == 'c'){
       document.getElementById("info").innerHTML = tt.next("c");
   } else if (plan == 'l'){
       document.getElementById("info").innerHTML = tt.next("l");
   } else {
       console.log("Invalid Plan..");
   }
}

并在HTML onLoad或JQuery ready函数中调用它

Answer 2

为什么必须单击选项卡以查看信息

页面加载时没有默认值。尝试调用$（document）中的document.onload定义的函数。就像这样

$(document).ready(function(){

 document.getElementById('info').innerHTML = timetable.next('c');

 $('#c').click(function(){
 if($(this).hasClass('active'))
  return;
 document.getElementById('info').innerHTML = timetable.next('c');
 $(this).addClass('active')
     .siblings().removeClass('active');
});

$('#l').click(function(){
if($(this).hasClass('active'))
 return;
document.getElementById('info').innerHTML = timetable.next('l');
$(this).addClass('active')
     .siblings().removeClass('active');
});
});

从Url访问选项卡

浏览器公开了可用于访问URL的方法，您可以从中设置条件以显示特定选项卡。假设在Google Chrome中使用网址www.myhost.com?tab=l：

$(document).ready(function(){

 var activeTab = new URI(window.location.toString()).searchParams.get('tab')
 switch (activeTab){
  case 'c':
   document.getElementById('info').innerHTML = timetable.next('c');
   break;
  case 'l':
   document.getElementById('info').innerHTML = timetable.next('c');
   break;
  default:
   document.getElementById('info').innerHTML = timetable.next('c');
 }


 $('#c').click(function(){
 if($(this).hasClass('active'))
  return;
 document.getElementById('info').innerHTML = timetable.next('c');
 $(this).addClass('active')
     .siblings().removeClass('active');
});

$('#l').click(function(){
if($(this).hasClass('active'))
 return;
document.getElementById('info').innerHTML = timetable.next('l');
$(this).addClass('active')
     .siblings().removeClass('active');
});
});

Javascript默认显示信息

2 个答案:

为什么必须单击选项卡以查看信息

从Url访问选项卡