2
這是這個問題的延續加載元素： jquery: how to detect element that is being loaded every few secondsjQuery的：不是說重點每隔幾秒鐘
原來我的代碼從上面的鏈接^工作正常。我不知道爲什麼它一開始不工作。
的現在，而不是提醒上點擊..
我試圖滾動到從屬性HREF的元素。
<a href="#scrolltothiselement" class="gotobtn">click</a>
...
<div id="scrolltothiselement"></div>
...
我這是怎麼做的吧：
$(document).on('click', '.gotobtn', function() {
var gotothisid = $(this).attr('href');
$(document).find(gotothisid).focus();
return false;
});
我也試過：
$(document).unbind().on('click', '.gotobtn', function(event) {
event.preventDefault();
var gotothisid = $(this).attr('href');
$(document).find(gotothisid).focus();
});
它不工作：「（
注：
<a href="#scrolltothiselement" class="gotobtn">click</a>
...
<div id="scrolltothiselement"></div>
...
裝入的index.html像
setInterval(
function()
{
$('.loadHere').unload().load('filetoload.php').fadeIn('slow');
}, 10500);
我已經在上面的鏈接解釋它：P
更多細節： 這不是一切，但我覺得有一個很好的機會問題是我在下面顯示的代碼中的某處。我也改變了變量名和類名。對不起，我無法顯示所有內容，因爲它是保密的。
的index.php
<?php include_once 'header.php'; ?>
<input type="hidden" class="currentlyvisibletab" value="" />
<div class="AllDateTimeTabs">
<div id="today" class="datetimetab today-cont">
<?php include_once 'today.php'; ?>
</div>
<div id="tomorrow" class="datetimetab tomorrow-cont">
<?php include_once 'tomorrow.php'; ?>
</div>
<div id="yesterday" class="datetimetab yesterday-cont">
<?php include_once 'yesterday.php'; ?>
</div>
</div>
<div id="testscrollhere">Scroll here. animate code works here.</div>
<?php include_once 'footer.php'; ?>
today.php，tomorrow.php，yesterday.php具有類似的結構只是不同的查詢。
<?php
include_once 'connect.php';
$thisfiledate = date('Y-m-d');
$result = $conn->prepare("SELECT * FROM tbname WHERE field= :thisfiledate AND anotherfield= 'value';");
$result -> bindParam(':thisfiledate', $thisfiledate);
$result->execute();
$displaydate = 'Today '.$thisfiledate;
include 'maincontent.php';
?>
maincontent.php - 我會刪除某些部分，因爲他們是保密的。但你明白了。 maincontent.php有while循環，它顯示從表中選擇的東西。從表中的每一行都有自己的
<div id="'.$row['rownumber'].'">details goes here</div>
有一個在頂部的贏家按鈕，如果你點擊它，它會滾動到這是勝利者的行。只有一個贏家。獲勝者按鈕是
`<a href="#123" class="gotobtn">123</a>`
如上所述。
<?php
...
while ($row = $result->fetch(PDO::FETCH_ASSOC))
{
...
$displayall .= '<div class="col-md-1 col-sm-2 col-xs-4 c-cont-col">';
$displayall .= '<div class="c-cont '.$cyellow .'" id="'.$row['rownumber'].'">';
$displayall .= '<h4 class="winnerlabel '.$wiinerlavelinvisibility .'">WINNER</h4>';
$displayall .= '<h4 class="cn-label '.$labelcolor.'">'. $row['rownumber']. '</h4>';
$displayall .='<div class="ci-cont">';
//$displayall .= '<p><b>Date:</b> '.$row['cut_off_date_tmstrans'].'</p>';
$displayall .= '<p><b>label:</b><br>'.number_format($row['x'],2).'</p>';
$displayall .= '<p><b>label2: </b><br>'.number_format($row['y'],2).'</p>';
$displayall .= '<p><b>label3: </b><br>'.number_format($row['z'],2).'</p>';
$displayall .= '</div>';
$displayall .= '</div>';
$displayall .= '</div>';
}
if($haswinner == 0)
{
$winnerboxinvisibility = 'invisibility';
}
else
{
$winnerboxinvisibility = '';
}
echo '<div class="row">';
echo '<div class="col-md-6 col-sm-4 col-xs-12 date-cont-col"> <div class="pull-left date-cont">'.$displaydate.' <div class="zerocountercolordot"></div> '. $zerocounter.' <div class="lessorequaltotencolordot"></div> '.$lessorequaltotencounter.' <div class="lessorequaltotwohundredcolordot"></div> '.$lessorequaltotwohundredcounter.' <div class="greterthantwohundercolordot"></div> '.$greterthantwohundercounter.'</div></div>';
echo '<a href="#'.$winningc.'" class="gotobtn"><div class="col-md-4 col-sm-5 col-xs-12 winning-c-col"> <div class="pull-right winning-c '.$winnerboxinvisibility.'"><p><b>Winner: </b>'.$winningc.'</div></div></a>';
echo '<div class="col-md-2 col-sm-3 col-xs-12 total-cont-col"> <div class="pull-right total-cont"><p><b>Label: </b>'.number_format($variablename,2).'</p></div></div>';
echo '</div>';
echo '<div class="row">';
echo $displayall;
echo '</div>';
?>
custom.js
var currentlyvisibletab;
$('.nav.navbar-nav a').on('click',function(event)
{
event.preventDefault();
loadthisdatetimetab = $(this).attr('href');
$('.datetimetab').hide();
$(loadthisdatetimetab).show();
$('.currentlyvisibletab').val(loadthisdatetimetab);
currentlyvisibletab = loadthisdatetimetab;
});
setInterval(
function()
{
$.ajax(
{
type: "POST",
url: "timecheck.php",
datatype: "json",
success: function(data)
{
if(data != 'no')//if not scheduled time to change tabs
{
if($('.currentlyvisibletab').val() != data)
{//data is either #today, #tomorrow , #yesterday
$('.currentlyvisibletab').val(data);
currentlyvisibletab = data;
$(currentlyvisibletab).siblings().hide();
$(data).show();
}
}
}
});
}, 3500);
function()
{
$('#today').unload().load('today.php').fadeIn('slow');
$('#tomorrow').unload().load('tomorrow.php').fadeIn('slow');
$('#yesterday').unload().load('yesterday.php').fadeIn('slow');
$(currentlyvisibletab).siblings().hide();
$(currentlyvisibletab).show();
}, 10599);
function onloadct()/*for <body onload="onloadct()">*/
{
if(window.location.hash)
{
// Fragment exists
var hashvalue = window.location.hash;
$('.datetimetab').hide();
$(hashvalue).show();
currentlyvisibletab = hashvalue;
} else
{
// Fragment doesn't exist
$.ajax(
{
type: "POST",
url: "onloadchecktime.php",
datatype: "json",
success: function(data)
{
if($('.currentlyvisibletab').val() != data)
{
$('.currentlyvisibletab').val(data);
currentlyvisibletab = data;
$(currentlyvisibletab).siblings().hide();
$(data).show();
}
}
});
}
}
/*as suggested in the answer and comments but still doesn't work. removed unbind because it stopped twitter bootstrap navbar from working when collapsed */
$(document).ready(function() {
$(document).on('click', '.gotobtn', function(event)
{
// prevent default behavior (getting the # in the URL)
event.preventDefault();
// get the id of the element that you want to scroll to
var gotothisid = $(this).attr('href');
// scroll the html/body as many pixels as the target element's position
$("body").animate({ scrollTop: $(gotothisid).offset().top });
});
});
問：你需要的（ 「點擊」 ......在所有??? –
爲什麼不讓'HREF = 「＃scrolltothiselement」 '自然做它的事？ – andi
你想要做一個平滑滾動，而不是跳躍元素，你會通過哈希HREF得到正常？ –