0

如果与之关联的 iframe 中的链接不存在，我正在寻找一种隐藏按钮的方法。

我的 html 看起来有点像这样

<!DOCTYPE html>
<html>

<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<title>Day Chooser</title>
<link rel='stylesheet' type='text/css' href='menu-files/style.css' />
    <script type='text/javascript' src='menu-files/jquery-1.10.2.min.js'></script>
    <script type='text/javascript' src='menu-files/jquery.js'></script>
</head>

<body>
<div id="wrap">

        <div id="menu">

        <ul>
                <li><a href="javascript:void(0);"     id="showmonday">Monday</a></li>
                 <li><a href="javascript:void(0);" id="showtuesday">Tuesday</a></li>
                  <li><a href="javascript:void(0);" id="showwednesday">Wednesday</a></li>
                   <li><a href="javascript:void(0);" id="showthursday">Thursday</a></li>
                    <li><a href="javascript:void(0);" id="showfriday">Friday</a></li>
                     <li><a href="javascript:void(0);" id="showsaturday">Saturday</a></li>
                      <li><a href="javascript:void(0);" id="showsunday">Sunday</a></li>
        </ul>
        </div>


        <div id="iframe">
            <div id="monday"><h1>Monday</h1><iframe src="monday/album/index.html" frameborder="0" style="height:779px; width:1024px;"></iframe></div>
             <div id="tuesday"><h1>Tuesday</h1><iframe src="tuesday/album/index.html" frameborder="0" style="height:779px; width:1024px;"></iframe></div>
              <div id="wednesday"><h1>Wednesday</h1><iframe src="wednesday/album/index.html" frameborder="0" style="height:779px; width:1024px;"></iframe></div>
               <div id="thursday"><h1>Thursday</h1><iframe src="thursday/album/index.html" frameborder="0" style="height:779px; width:1024px;"></iframe></div>
                <div id="friday"><h1>Friday</h1><iframe src="friday/album/index.html" frameborder="0" style="height:779px; width:1024px;"></iframe></div>
                 <div id="saturday"><h1>Saturday</h1><iframe src="saturday/album/index.html" frameborder="0" style="height:779px; width:1024px;"></iframe></div>
                  <div id="sunday"><h1>Sunday</h1><iframe src="sunday/album/index.html" frameborder="0" style="height:779px; width:1024px;"></iframe></div>
        </div>

</div>
</body>
</html>

js代码是这样的

idleTime = 0;
$(document).ready(function () {
//Increment the idle time counter every minute.
var idleInterval = setInterval("timerIncrement()", 60000); // 1 minute

//Zero the idle timer on mouse movement.
$(this).mousemove(function (e) {
    idleTime = 0;
});
$(this).keypress(function (e) {
    idleTime = 0;
});
})
function timerIncrement() {
idleTime = idleTime + 1;
if (idleTime > 1) { // 20 minutes
    window.location.reload();
}
}



 $(function(){

 $('#showfrontpage').click(function(){
 $('#frontpage').show();
 $('#monday').hide();
 $('#wednesday').hide(); 
 $('#tuesday').hide();
     $('#thursday').hide();
     $('#friday').hide();
     $('#saturday').hide();
     $('#sunday').hide();
 });
 $('#showmonday').click(function(){
 $('#frontpage').hide();
 $('#monday').show();
 $('#wednesday').hide(); 
 $('#tuesday').hide();
     $('#thursday').hide();
     $('#friday').hide();
     $('#saturday').hide();
     $('#sunday').hide();
 });
 $('#showtuesday').click(function(){
 $('#frontpage').hide();
 $('#monday').hide();
 $('#wednesday').hide(); 
 $('#tuesday').show();
     $('#thursday').hide();
     $('#friday').hide();
     $('#saturday').hide();
     $('#sunday').hide();
 });
 $('#showwednesday').click(function(){
 $('#frontpage').hide();
 $('#monday').hide();
 $('#wednesday').show(); 
 $('#tuesday').hide();
     $('#thursday').hide();
     $('#friday').hide();
     $('#saturday').hide();
     $('#sunday').hide();
  });
 $('#showthursday').click(function(){
 $('#frontpage').hide();
 $('#monday').hide();
 $('#wednesday').hide(); 
 $('#tuesday').hide();
     $('#thursday').show();
     $('#friday').hide();
     $('#saturday').hide();
     $('#sunday').hide();
 });
 $('#showfriday').click(function(){
 $('#frontpage').hide();
 $('#monday').hide();
 $('#wednesday').hide(); 
 $('#tuesday').hide();
     $('#thursday').hide();
     $('#friday').show();
     $('#saturday').hide();
     $('#sunday').hide();
 });
 $('#showsaturday').click(function(){
 $('#frontpage').hide();
 $('#monday').hide();
 $('#wednesday').hide(); 
 $('#tuesday').hide();
     $('#thursday').hide();
     $('#friday').hide();
     $('#saturday').show();
     $('#sunday').hide();
 });
 $('#showsunday').click(function(){
 $('#frontpage').hide();
 $('#monday').hide();
 $('#wednesday').hide(); 
 $('#tuesday').hide();
     $('#thursday').hide();
     $('#friday').hide();
     $('#saturday').hide();
     $('#sunday').show();
 });

 });

js 顶部的代码只是一个计时器，如果没有鼠标时刻，它会在一段时间后重新加载菜单。

其他 js 代码隐藏了除选定的 iframe 之外的所有 iframe，在 css 中有隐藏所有 iframe 的代码，直到它们被选中。

我还需要做的是隐藏菜单按钮，并且仅显示与其关联的 iframe 中的链接是否存在。

所有现有代码都有效，我只需要最后一点，然后我就完成了。

最后一件事，所有这些都需要在没有服务器的情况下在本地工作，上面的代码在本地工作。

4

1 回答 1

0

您可以使用 jQuery 的.find方法来完成。演示在这里。在演示中，我注释掉了周一的 iframe 以显示它有效

我更新了您的代码以包含类以使其更短且更易于处理，但如果您不使用类，它是相同的方法，只需为每个 id 重复

根据我添加的类更新了 jQuery：

$(function(){
    // This is the part that your question is about - hiding the li if there is
    // no corresponding iframe
    $('.show').each(function() {
        var dayButton = $(this).attr('class').split(' ')[1];
        if($('.day.'+ dayButton).find('iframe').length == 0)
        {
            $('.show.'+ dayButton).hide();
        }
    });

    // This is the part you already had, just in class form so it's shorter
    $('.day').each(function() {
        $(this).hide();
    });                   
    $('.show').click(function() {
        var dayClicked = $(this).attr('class').split(' ')[1]
        $('.day').each(function() {
            $(this).hide();
        });
        $('.day.' + dayClicked).show();
    });
});

您只需要设置我使用您项目中的 CSS 制作的 jsFiddle 的样式，它应该可以完美运行

于 2013-08-08T15:27:18.667 回答