jquery - 我怎样才能分解这个 jQuery 并且不重复自己？

Question

我有三层，其中两层使用 CSS 隐藏。我想根据用户关注的输入使这些层可见/不可见:

我要更改的三个图层是:#titleBox、#phoneBox、#addressBox，输入是#title、#phone、#address。 #titleBox 是页面加载时唯一可见的。

$("#title").focus(function () {
    $("#phoneBox,#addressBox").hide();
    $("#titleBox").fadeIn("slow");
});
$("#phone").click(function () {
    $("#addressBox,#titleBox").hide();
    $("#phoneBox").fadeIn("slow");
});
$("#address").click(function () {
    $("#titleBox,#phoneBox").hide();
    $("#addressBox").fadeIn("slow");
});

Answer 1

jQuery 的第一部分(如下)不起作用，但我将其作为我自己白痴的证据，即 <hr /> 之后的内容。然而，确实有效。

$("#containerElement input").focus(function () {
    $(div:not'(#'+ this.id '+Box)').hide();
    $('#' + this.id + 'Box').fadeIn('slow');
});

<小时/> 已编辑:

因为，基本上，上面的方法并没有真正发挥作用。但是，以下内容确实如此:

html:

<div id="containerElement">
    <input type="text" id="address" />
    <input type="text" id="phone" />
    <input type="text" id="title" />
</div>

<div id="otherContainer">
    <div id="addressBox">addressBox</div>
    <div id="phoneBox">phoneBox</div>
    <div id="titleBox">titleBox</div>
</div>

jQuery:

$(document).ready(
    function(){
        $("#containerElement input").focus(function () {
            var showThis = this.id + 'Box';
            $(this).val(showThis);
            $('#otherContainer div:not(#' + showThis + ')').hide();
            $('#'+showThis).fadeIn('slow');
        });
    });

JS Fiddle demo .