Question

我正在寻找一种隐藏按钮的方法，如果与之关联的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，在css中会有代码隐藏所有iframe，直到选中它们为止。

我还需要进行的是隐藏菜单按钮，只显示其关联的iframe中的链接是否存在。

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

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

Answer 1

你可以使用jQuery的.find method来做到这一点。 Demo here。在演示中，我评论了周一的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样式，它应该可以正常工作

如果关联的iframe中的链接不存在，请隐藏按钮

1 个答案: