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 を非表示にします。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 に答える