Показать / скрыть div не работает - PullRequest
Новая
       6

Показать / скрыть div не работает

1 голос
/ 19 сентября 2011

У меня проблема с отображением списка делителей в выпадающем меню, я получаю $ is not defined Я изменил свой код так, чтобы не было повторяющихся идентификаторов. Когда я загружаю страницу, она показывает все 3 деления, но как только я выбираю опцию из выпадающего списка, они все скрываются.

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>

Ответы [ 3 ]

4 голосов
/ 19 сентября 2011

Поместите jQuery включите в <head>.

также: 

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

должно быть: 

    $('#newwebsite, #websiteredevelopment, #other').hide();
0 голосов
/ 19 сентября 2011

Я бы сделал что-то вроде этого: 

$(function() {
  $('#requiredOption').change(function() {
    var divToHide = "#" + $(this).val() + "Div";
    $(divToHide).show()
      .siblings('#newwebsiteDiv, #websiteredevelopmentDiv, #otherDiv')
        .hide();
  });
});
0 голосов
/ 19 сентября 2011

нормально работает импорт файлов jquery и js;Во-первых, ваш код не содержит ни одного элемента, содержащего идентификатор «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();
    });
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...