显示/隐藏 div 不起作用

发布于 2024-12-05 00:57:38 字数 3548 浏览 1 评论 0原文

我在从下拉菜单中选择时显示我的 div 时遇到问题，我收到 $ is not Defined 我已经调整了我的代码，使其不具有重复的 id。当我加载页面时，它显示所有 3 个 div，但一旦我从下拉列表中选择一个选项，它们就会全部隐藏。

JS：

$(document).ready(function(){ 
    $('#requiredOption').change(function(){
        $('#newwebsiteDiv,#websiteredevelopmentDiv,#otherDiv').hide();
        $(this).find('option:selected').attr('id') + ('Div').show();
    });
});

HTML：

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>Template 2011</title>
    <link rel="stylesheet" href="_assets/css/style.css">
</head>
    <body>
        <header>
            <div id="logo">Template Here</div>
                <nav>
                    <ul>
                        <li><a href="/">Home</a></li>
                        <li><a href="#">About Me</a></li>
                        <li><a href="quote.html">Free Quote</a></li>
                        <li><a href="#">Showcase</a></li>
                        <li><a href="#">Contact Me</a></li>
                    </ul>
                </nav>
        </header>
                        <section id="content">
            <h1>Free Quote</h1>
                <p>Please fill out the below questionnaire to receive your free web development quote</p>
                    <form action="" method="post" accept-charset="utf-8">
                        <select name="requiredOption" id="requiredOption">
                            <option id="pleaseselect" value="pleaseselect">Please Select Your Required Quote</option>
                            <option id="newwebsite" value="newwebsite">New Website</option>
                            <option id="websiteredevelopment" value="websiteredevelopment">Website Redevelopment</option>
                            <option id="other" value="other">Other</option>
                        </select>
                        <p><input type="submit" value="submit"></p>
                    </form>
                        <section id="newwebsiteDiv">
                            <p>New Website</p>
                        </section>
                            <section id="websiteredevelopmentDiv">
                                <p>Website Redevelopment</p>
                            </section>
                                <section id="otherDiv">
                                    <p>Other</p>
                                </section>

</section>
            <section id="sidebar">
        <div id="box_one">
            <p>Box One</p>
        </div>
        <div id="box_two">
            <p>Box Two</p>
        </div>
        <div id="box_three">
            <p>Box Three</p>
        </div>
        </section>      
            <footer>
                <p>This is the footer</p>
            </footer>
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
            <script src="_assets/js/js.js" type="text/javascript"></script>
</body>

原文

I am having an issue getting my div's to show on select from the drop down menu, I am getting $ is not defined I have adjusted my code to not have duplicate ids. When I load the page it shows all 3 divs but as soon as I select an option from the drop down they all go and hide.

JS:

$(document).ready(function(){ 
    $('#requiredOption').change(function(){
        $('#newwebsiteDiv,#websiteredevelopmentDiv,#otherDiv').hide();
        $(this).find('option:selected').attr('id') + ('Div').show();
    });
});

HTML:

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>Template 2011</title>
    <link rel="stylesheet" href="_assets/css/style.css">
</head>
    <body>
        <header>
            <div id="logo">Template Here</div>
                <nav>
                    <ul>
                        <li><a href="/">Home</a></li>
                        <li><a href="#">About Me</a></li>
                        <li><a href="quote.html">Free Quote</a></li>
                        <li><a href="#">Showcase</a></li>
                        <li><a href="#">Contact Me</a></li>
                    </ul>
                </nav>
        </header>
                        <section id="content">
            <h1>Free Quote</h1>
                <p>Please fill out the below questionnaire to receive your free web development quote</p>
                    <form action="" method="post" accept-charset="utf-8">
                        <select name="requiredOption" id="requiredOption">
                            <option id="pleaseselect" value="pleaseselect">Please Select Your Required Quote</option>
                            <option id="newwebsite" value="newwebsite">New Website</option>
                            <option id="websiteredevelopment" value="websiteredevelopment">Website Redevelopment</option>
                            <option id="other" value="other">Other</option>
                        </select>
                        <p><input type="submit" value="submit"></p>
                    </form>
                        <section id="newwebsiteDiv">
                            <p>New Website</p>
                        </section>
                            <section id="websiteredevelopmentDiv">
                                <p>Website Redevelopment</p>
                            </section>
                                <section id="otherDiv">
                                    <p>Other</p>
                                </section>

</section>
            <section id="sidebar">
        <div id="box_one">
            <p>Box One</p>
        </div>
        <div id="box_two">
            <p>Box Two</p>
        </div>
        <div id="box_three">
            <p>Box Three</p>
        </div>
        </section>      
            <footer>
                <p>This is the footer</p>
            </footer>
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
            <script src="_assets/js/js.js" type="text/javascript"></script>
</body>

分享到QQ

分享到微博

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

发布评论

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

我最亲爱的 2024-12-12 00:57:38

将 jQuery 包含在中。

还：

 $('#newwebsite','#websiteredevelopment','#other').hide();

应该是：

    $('#newwebsite, #websiteredevelopment, #other').hide();

Put the jQuery include in the <head>.

also:

    $('#newwebsite','#websiteredevelopment','#other').hide();

should be:

    $('#newwebsite, #websiteredevelopment, #other').hide();

回复收藏 0 原文

ㄖ落Θ余辉 2024-12-12 00:57:38

jquery和js文件导入就可以了；
首先，您的代码不包含任何包含 id“select”的元素。您的隐藏代码应该类似于“evan”

$('#newwebsite,#websiteredevelopment,#other').hide();
所以你的代码应该是这样的：

$(document).ready(function(){ 
    $('#requiredOption').change(function(){
        $('#newwebsiteDiv,#websiteredevelopmentDiv,#otherDiv').hide();
        var targetDiv=$(this).find('option:selected').attr("id")+"Div"
        $("#"+targetDiv).show();
    });
});

the jquery and js file import thing is ok;
first,your code not include any element contains id "select".your hide code should like 'evan'

$('#newwebsite,#websiteredevelopment,#other').hide();
so your code should like this:

$(document).ready(function(){ 
    $('#requiredOption').change(function(){
        $('#newwebsiteDiv,#websiteredevelopmentDiv,#otherDiv').hide();
        var targetDiv=$(this).find('option:selected').attr("id")+"Div"
        $("#"+targetDiv).show();
    });
});

回复收藏 0 原文

薄荷→糖丶微凉 2024-12-12 00:57:38

我会做这样的事情：

$(function() {
  $('#requiredOption').change(function() {
    var divToHide = "#" + $(this).val() + "Div";
    $(divToHide).show()
      .siblings('#newwebsiteDiv, #websiteredevelopmentDiv, #otherDiv')
        .hide();
  });
});

I would do something like this:

$(function() {
  $('#requiredOption').change(function() {
    var divToHide = "#" + $(this).val() + "Div";
    $(divToHide).show()
      .siblings('#newwebsiteDiv, #websiteredevelopmentDiv, #otherDiv')
        .hide();
  });
});

回复收藏 0 原文

~没有更多了~