我在表单页面上有一个弹出窗口，还有一个要根据用户输入显示的隐藏元素。 两者都使用jQuery

Question

我在表单页面上有一个弹出窗口，还有一个要根据用户输入显示的隐藏元素。 两者都使用jquery进行显示。 弹出框仅适用于1.12.0版，但不适用于1.7.1版，隐藏元素仅适用于1.12.0版，不适用于1.7.1版。 使用指向googleapis的两个链接也不起作用。 有人对此有任何解决方案吗？ 谢谢。

        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
        <h4 class=""><a href="javascript://" title="Dismissible popover" data-toggle="popover" data-trigger="focus" data-content="Popover Content">Do you require something specific</a></h4>
                <div class="btn-group" data-toggle="buttons">
                    <label class="btn btn-default">
                        <input type="radio" name="RadioGroup7" value="radio" id="RadioGroup7_0" required="required" tabindex="9" title="">
                        Yes</label>
                    <label class="btn btn-default">
                        <input type="radio" name="RadioGroup7" value="radio" id="RadioGroup7_1" required="required" tabindex="9" title="">
                        No</label>
                <div id="functionality">
                        <label>                        
                            <textarea rows="5"></textarea>
                        </label>
                    </div>
                    <script>
                        $("#functionality").hide();
                        $("input[name=RadioGroup7]").click(function()
                            {
                                if ( $("#RadioGroup7_1").attr('checked'))
                                    $("#functionality").hide();
                                if ( $("#RadioGroup7_0").attr('checked'))
                                    $("#functionality").show();
                        });                 
                    </script>
                    <script>
                        $(document).ready(function(){
                            $('[data-toggle="popover"]').popover();   
                        });
                    </script>
                </div>

Answer 1

要使用jQuery 1.12.0修复此问题，请执行以下操作：

• 使用.change()代替.click()因为你实际上点击标签不是输入
• 使用.is(':checked')而不是.attr('checked')因为.attr()检查DOM设置的属性（在实际HTML中）

恕我直言，您还应该：

• 缓存多次使用的元素，例如$functionality = $("#functionality");
• 您还应该将所有代码都放在$(document).ready()函数中
• 使用三元运算符来简化if逻辑

将您的代码更新为以下内容：

---

 $(document).ready(function() {
   $('[data-toggle="popover"]').popover();
   $functionality = $("#functionality").hide(); // cache and hide in the same call
   $("input[name=RadioGroup7]").change(function() {
     $("#RadioGroup7_1").is(':checked') ? $functionality.hide(): $functionality.show();
   });
 });

工作jsFiddle