javascript - jquery:不关注每隔几秒加载一次的元素

Question

这是这个问题的延续: jquery: how to detect element that is being loaded every few seconds

从上面的链接中可以看出我的代码 ^ 工作正常。我不知道为什么它一开始不起作用。

现在不再是点击提醒..

我正在尝试从属性 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

更多详情:这不是全部，但我认为问题很有可能出在我在下面显示的代码中的某个地方。我还更改了变量名和类名。很抱歉，我不能展示所有内容，因为这是 secret 。

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


?>

ma​​incontent.php - 我会删除一些部分，因为它们是 secret 的。但你明白了。 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>';


?>

自定义.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 });
  });
});

Answer 1

您可以使用 animate() 来实现此目的方法，并在单击链接后将 html/body 滚动到元素(在防止将 # 放入 URL 的默认行为之后)。

要计算要滚动的像素数量，您可以使用 offset()将返回元素坐标对的方法(您将关注 .offset().top 以进行垂直滚动)。然后使用与 Nick's solution 中解释的方法类似的方法。使用 scrollTop 滚动 html 和 body。

一个简单的演示:

$(document).ready(function() {
  $(document).unbind().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
    $("html, body").animate({ scrollTop: $(gotothisid).offset().top });
  });
});

p { margin-bottom: 12px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><a href="#scrolltothiselement" class="gotobtn">click</a></p>
<p>Nope.</p>
<p>Nope.</p>
<p>Nope.</p>
<p>Nope.</p>
<p>Nope.</p>
<p>Nope.</p>
<p>Nope.</p>
<p>Nope.</p>
<p>Nope.</p>
<p>Nope.</p>
<div id="scrolltothiselement">Yes! Scroll here.</div>
<p>Nope.</p>
<p>Nope.</p>
<p>Nope.</p>
<p>Nope.</p>
<p>Nope.</p>
<p>Nope.</p>
<p>Nope.</p>
<p>Nope.</p>
<p>Nope.</p>
<p>Nope.</p>