如何简化代码(jquery) (单选按钮)

Question

单击/选中"#LGF_info“时，我只想显示"#HideLgf”，否则就隐藏它，怎么可能？

        $(document).ready(function(){
        $('#LGF_info').click(function() {
            $('#HideLgf').show(100);
        });

        $('#DDP_info').click(function () {
            $('#HideLgf').hide();
        });

        $('#EXW_info').click(function () {
            $('#HideLgf').hide();
        });


        $('#DDU_info').click(function () {
            $('#HideLgf').hide();
        });


    });

Answer 1

很简单。但我必须承认，我可能会改变更多(例如，使用类而不是show()/hide()、更少的‘d、适当的函数等等)，但这就是您提供给我们的全部内容。通过on使用事件委托可以删除经常需要的domReady调用，并允许重用回调(例如动态添加的内容)。

$(document)
    .on("click", "#DDP_info, #EXW_info, #DDU_info", function(e) {
        $("#HideLgf").hide();
    })
    .on("click", "#LGF_info", function(e) {
        $("#HideLgf").show(100);
    })
;

Answer 2

在这里尝试使用multiple selector来简化代码，

$('#LGF_info,#DDP_info,#EXW_info,#DDU_info').click(function () {           
   var cache = $('#HideLgf');
   if(this.id == "HideLgf") {
    cache.stop().show(100);
   }
   else {
    cache.hide();
   } 
});