Question

对于我正在构建的投资组合网站，我感觉像是一个简单的问题。当用户单击项目图像时，隐藏的包含div应该在页面顶部向下滑动，其中包含大图像和项目描述。我已经完成了大部分工作，除了当我点击任一示例项目图像时，两个大版本（隐藏图像和项目描述）都向下滑动，即使我在点击时定位唯一ID。显然，我只希望一次显示一个项目。非常感谢任何帮助。

柔依

http://www.zoeminikes.com/james

<script type="text/javascript">

   $(document).ready(function() {

       $('.slideshow-images').each(function(){
           $(this).cycle({fx:'scrollHorz',
           pause: 1,
           timeout: 0,
           speed:   'fast',              
           next: $(this).parents('.slideshow-wrap').find('.next'),
           prev: $(this).parents('.slideshow-wrap').find('.prev'),      
           easing:  'easeinout'});
       });

    $(".btn-close").click(function(){
    $('#project-slider').slideToggle('500', 'easeinout' );
    $('.project-container').removeClass("project-container-active");    
    return false; //Prevent the browser jump to the link anchor 
    });     

    $("#project-slider").hide(); 

    $(".project-container").click(function(){
    $.scrollTo( '#header', 300, 'easeinout');
    $('.project-container').removeClass("project-container-active");
    $(this).addClass("project-container-active");
    $('#project-slider').slideDown('500', 'easeinout' );
    return false; //Prevent the browser jump to the link anchor
    }); 

     });
</script>
<script type="text/javascript">
        function showProject(id){

            var project=document.getElementById(id);
            project=1;



            if(project=='1')

                {

                project.show();

                }

            else

                {

                project.style.display='none';

                }

        }


</script>
</code><body>

<div id="outerwrap">
    <div id="wrap">


    <div id="header">

        <div id="logo-container">
            <div id="logo">
                <img src="images/logos/brush-pencil-seal.png" />

            </div>

            <div id="wordmark">
                <a href="index.html"><img src="images/wordmarks/varsity.png" /></a>
            </div>

        </div>

        <div id="nav">

            <div id="social-container">

                <div class="social-icon" id="social-email">
                    <a href="mailto:james@jamesillustration.com?Subject=Hi%20there"><p>email</p></a>
                </div>

                <div class="social-icon" id="social-facebook">
                    <a href="https://www.facebook.com/pages/James-Larson/116462605037469" target="_blank"><p>facebook</p></a>
                </div>

                <div class="social-icon" id="social-behance">
                    <a href="http://www.behance.net/jameslarson" target="_blank"><p>behance</p></a>
                </div>

            </div><!--end social-container-->

            <div id="all-nav-links">
                <div class="nav-link-container" id="portfolio">
                    <a class="nav-link" id="portfolio-link" href="index.html"><p>PORTFOLIO</p></a>
                </div>

                <div class="nav-link-container" id="blog">
                    <a class="nav-link" id="blog-link" href=""><p>BLOG</p></a>
                </div>


                <div class="nav-link-container" id="windup">
                    <a class="nav-link" id="windup-link" href=""><p>WIND UP COMICS</p></a>
                </div>

                <div class="nav-link-container" id="profile">
                    <a class="nav-link" id="profile-link" href="profile.html"><p>PROFILE</p></a>
                </div>

            </div>

            <div class="new">
            </div>

        </div><!--end nav-->

    </div><!--end header-->

    <div id="sawtooth">
    </div>



    <div id="project-slider">

    <div class="project-content" id="windup-content"><?php include("windup.php"); ?></div>
    <div class="project-content" id="spill-content"><?php include("spill.php"); ?></div>

    </div><!--end project-slider-->

    <div id="content">

      <div id="projects">

        <div class="project-container" id="windup-container"><a href="javascript:; onclick="showProject('windup-content')"></a>
                <img src="images/portfolio/thumbs/windup-space.png" />
            <div class="caption">
                <h1>WIND UP COMICS</h1>
                <h2>Pen and ink, digital</h2>

            </div>
        </a></div>


            <div class="project-container" id="spill-container"><a href="javascript:; onclick="showProject()"></a>
                <img src="images/portfolio/thumbs/spill.png" />
            <div class="caption">
                <h1>SPILL</h1>
                <h2>Pen and ink, watercolor</h2>

            </div>
        </a></div>







      </div><!--end projects-->


    </div><!--end content-->

    </div><!--end wrap-->

    <div id="footer">

        <div id="footer-copy">  
            <div id="copyright-container">
                <p class="footer-text">&copy; Copyright 2011&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;James Larson</p>
            </div>

            <div id="made-container">
                <p class="footer-text">Made with love by <a id="zoe-link" href="http://www.zoeminikes.com" target="_blank">Zoe Minikes</a></p>
            </div>
        </div>

    </div>

</div><!--end outerwrap-->


</body>

</html>

Answer 1

您的if和else代码存在问题。声明的var项目里面有什么价值？请检查一下。

此处始终为project = 1.默认情况下，您指定此值。所以从来没有条件有效。总是得到project = 1，如果条件有效。所以你的if else条件是错误的。解决这个问题我觉得它运作正常。

无法使用onclick if else事件来定位特定div

1 个答案: