Question

如何使用jquery show并为此隐藏，因为。我知道javascript我已经实现了。如何在jquery中做到这一点。

如果我在周一，周二和周三点击。我正在显示星期一和星期二的时间表。假设如果我点击星期一。星期一下面，我想要显示星期一的时间和时间。对周二来说是明智的。如何使用jquery为此。我必须使用什么属性以及如何使用。

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
        <script type="text/javascript">
            function show(element) {
                var day = element.value; // gets the value of checkbox, e.g: 'monday'
                var timeElement = document.querySelector('.times-' + day); // finds correct times- element for day

                if (element.checked) {
                    timeElement.style.display = 'block';  
                } else {
                    timeElement.style.display = 'none';
                }
            }
        </script>
        <style type="text/css">
            .hidden {
                display: none;
            }

            input[type=submit] {
                margin-top: 10px;
            }
        </style>
    </head>

    <body>
        <form  name="test" action="" method="post">
            <fieldset>
                <legend>Day And Time Available:</legend>  
                <input type="checkbox" class="day" value="monday" onclick="show(this);"/>Monday<br/>
                <input type="checkbox" class="day" value="tuesday" onclick="show(this);"/>Tuesday<br/>
            </fieldset>
            <div class="times-monday hidden">
                <p>Monday</p>
                <label for="FromtimeMonday">From Time</label>
                <select name="FromtimeMonday" id="FromtimeMonday">
                    <option value="6Am">6Am</option>
                    <option value="7Am">7Am</option>
                    <option value="8Am">8Am</option>
                </select>
                <label for="TotimeMonday">To Time</label>
                <select name="TotimeMonday" id="TotimeMonday">
                    <option value="6Am">6Am</option>
                    <option value="7Am">7Am</option>
                    <option value="8Am">8Am</option>
                </select>  
            </div>

            <div class="times-tuesday hidden">
                <p>Tuesday</p>
                <label for="FromtimeTueday">From Time</label>
                <select name="FromtimeTueday" id="FromtimeTueday">
                    <option value="6Am">6Am</option>
                    <option value="7Am">7Am</option>
                    <option value="8Am">8Am</option>
                </select>

                <label for="TotimeTueday">To Time</label>
                <select name="TotimeTueday" id="TotimeTueday">
                    <option value="6Am">6Am</option>
                    <option value="7Am">7Am</option>
                    <option value="8Am">8Am</option>
                </select>  
            </div>
            <input type="submit" name="submit" text="submit" />
        </form>
    </body>
</html>

Answer 1

$(timeElement).show();

$(timeElement).hide();

Answer 2

$(selector).show();
$(selector).hide();

其中selector可以是多个内容，例如一个类：".class"
或者是id："#id"

Answer 3

试试这个.代表类，#代表您可以在元素Demo here中使用的ID

 $('.day').click(function(){
    var dayname= $(this).attr('id');
    if($('#'+dayname).is(":checked"))      {
    $('#'+dayname+'show').show();  
    }else{
        $('#'+dayname+'show').hide();  
    }

});

Answer 4

我希望JSFiddle帮助你。

我用JQuery-.click-Funktion替换了您的功能并删除了

 onclick="show(this);"

来自您的复选框。

编辑：我使用toggle-funktion来显示/隐藏您的表单。现在整个JQuery代码看起来像这样：

$( ".day" ).click(function() {
    $('.times-' + this.value).toggle();
});

Answer 5

您应该使用 jQuery: is a fast, small, and feature-rich JavaScript library.

他煮咖啡：

您可以通过选择器将特定元素上的“点击”事件绑定（例如：您的输入广播与类'.day'）
您可以使用函数jQuery hide。

$(document).ready(function() {
    $('.times-tuesday').toggle();
    $('.times-monday').toggle();
    $(document).on('click', '.day', function() {
        $('.times-' + this.value).toggle();
    });
});

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<body>
    <form name="test" action="" method="post">
        <fieldset>
            <legend>Day And Time Available:</legend>
            <input type="checkbox" class="day" value="monday"/>Monday
            <br/>
            <div class="times-monday hidden">
                <p>Monday</p>
                <label for="FromtimeMonday">From Time</label>
                <select name="FromtimeMonday" id="FromtimeMonday">
                    <option value="6Am">6Am</option>
                    <option value="7Am">7Am</option>
                    <option value="8Am">8Am</option>
                </select>
                <label for="TotimeMonday">To Time</label>
                <select name="TotimeMonday" id="TotimeMonday">
                    <option value="6Am">6Am</option>
                    <option value="7Am">7Am</option>
                    <option value="8Am">8Am</option>
                </select>
            </div>
            <input type="checkbox" class="day" value="tuesday"/>Tuesday
            <br/>
            <div class="times-tuesday hidden">
                <p>Tuesday</p>
                <label for="FromtimeTueday">From Time</label>
                <select name="FromtimeTueday" id="FromtimeTueday">
                    <option value="6Am">6Am</option>
                    <option value="7Am">7Am</option>
                    <option value="8Am">8Am</option>
                </select>
                <label for="TotimeTueday">To Time</label>
                <select name="TotimeTueday" id="TotimeTueday">
                    <option value="6Am">6Am</option>
                    <option value="7Am">7Am</option>
                    <option value="8Am">8Am</option>
                </select>
            </div>
        </fieldset>
        <input type="submit" name="submit" text="submit" />
    </form>
</body>

如何使用jquery显示和隐藏这项工作

5 个答案: