当前位置： 文江博客话题详情

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

发布于 2024-12-08 00:52:31 字数 6298 浏览 0 评论 0原文

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

佐伊

http://www.zoenikes.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:[email protected]?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>
原文

I have what feels like a simple problem with a portfolio site I'm building. When a user clicks a project image, a hidden containing div should slide down at the top of the page with large images and a description of the project. I've gotten most of it to work except that when I click either of the sample project images, both large versions (the hidden images and project descriptions) slide down, even though I am targeting unique IDs on click. I only want one project to display at a time, obviously. Any help is greatly appreciated.

zoe

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:[email protected]?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">© Copyright 2011   |   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>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

涙—继续流 2024-12-15 00:52:31

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

这里总是project = 1。默认情况下，您分配该值。所以其他条件都不起作用。总是让project = 1并且如果条件有效。所以你的 if else 条件是错误的。解决这个问题我认为它工作正常。

There is a problem in your if and else code. what value is there inside declared var project?? Please check this.

Here always project = 1. By default you assign this value. So never else condition works. always get project = 1 and if condition works. So your if else condition is wrong. solve this issue i think it works properly.

回复 原文
~没有更多了~

关于作者

活雷疯

暂无简介

0 文章
0 评论
24 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

醉城メ夜风

文章 0 评论 0

远昼

文章 0 评论 0

平生欢

文章 0 评论 0

微凉

文章 0 评论 0

Honwey

文章 0 评论 0

qq_ikhFfg

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文