我如何考虑这个jQuery而不重复我自己？

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

我要更改的三个层是：#标题框、#电话框、#地址框，输入是#标题、#电话、#地址。#标题框是页面加载时唯一可见的标题框

$("#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");
});

jQuery的第一部分（如下）不起作用，但我留下它作为我自己白痴的证据，

之后的东西确实起作用

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

---

编辑：

因为，基本上，上面的方法并没有那么有效。然而，以下情况确实存在：

html: .

jQuery的第一部分（如下）不起作用，但我留下它作为我自己白痴的证据，

之后的东西确实起作用

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

---

编辑：

因为，基本上，上面的方法并没有那么有效。然而，以下情况确实存在：

html:

因为您使用的是两个不同的事件，所以我创建了一个可以对这两个事件重用的函数

例子：

---

编辑：纠正错误。应该有

.filter（）

而不是

.is（）

这将缓存“Box”元素，然后从带有事件的元素中提取ID，并使用jQuery的方法

.hide（）

或

.fadeIn（）

正确的元素

因为您使用的是两个不同的事件，所以我创建了一个可以对这两个事件重用的函数

例子：

---

---

编辑：纠正错误。应该有

.filter（）

而不是

.is（）

谢谢，大卫！但是我在参数列表[Break on this error]$（div:not'（#'+this.id'+Box'））之后得到了这个错误：missing）\是的，我在发布jQuery之前没有测试它。然后，我去把这些问题放在一起，并意识到存在的问题。我已编辑以更新答案（带有可用的演示）…抱歉=/谢谢，大卫！但是我在参数列表[Break on this error]$（div:not'（#'+this.id'+Box'））之后得到了这个错误：missing）\是的，我在发布jQuery之前没有测试它。然后，我去把这些问题放在一起，并意识到存在的问题。我已编辑以更新答案（带有一个工作演示）…抱歉=/Patrick，谢谢你。。。它似乎有效，但过了一段时间，所有东西都消失了，我得到了这个：Box.is（“#”+this.id+“Box”）.fadeIn不是函数[Break on this error]$Box.is（“#”+this.id+“Box”）.fadeIn（'slow'）@梅尔-抱歉，刚刚更新。我应该使用

.filter（）

而不是

.is（）

。固定的这将非常有效，因为它缓存元素，并且只过滤您想要的元素。@Mel-此外，您的问题使用两种不同的事件类型，

单击

和

聚焦

。这是你的本意吗？如果不是，这可以简化一点。@patrick，不，它只用于聚焦，而不是单击！但这很容易，对吗？我所要做的就是删除click函数并将id添加到focus函数中@梅尔-没错o） 在这种情况下，您还可以消除命名函数，只使用匿名函数

$（“#phone，#address，#title”）.focus（function（）{$boxes.not（…

Patrick，谢谢你…它似乎能工作，但过了一段时间，所有东西都消失了，我得到了：Box.is（“#“+this.id+”Box”）.fadeIn不是函数[Break on on on on this error]$boxes.is（“#+this.id+”Box”）.fadeIn（'slow'））；@Mel-抱歉，刚刚更新。我应该使用

.filter（）

而不是

.is（）

。已修复。这将非常有效，因为它缓存元素，并只过滤元素你想要。@Mel-另外，你的问题使用了两种不同的事件类型，

单击

和

聚焦

。这是你想要的吗？如果不是，这可以简化一点。@patrick，不，它只用于聚焦，而不是单击！但这很简单，对吗？我所要做的就是删除单击功能并将ID添加到聚焦中action！@Mel-确切地说是：o）在这种情况下，您还可以删除命名函数，只使用匿名函数。

$（“#电话，#地址，#标题”）.focus（函数（）{$box.not（…

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

// cache the boxes
var $boxes = $('#titleBox,#phoneBox,#addressBox');

// create reusable function that can be applied as click and focus handlers
function boxSwitch( e ) {
    $boxes.not('#' + this.id + 'Box').hide();
    $boxes.filter('#' + this.id + 'Box').fadeIn('slow');
}

// apply the handler
$("#title").focus(boxSwitch);
$("#phone,#address").click(boxSwitch);

$('.input-class-selector').bind('focus', function (event) {

    var el = $('#' + $(this).attr('id'));

    if (!$(el).is(':hidden')) {

       $('.layers-class-selector').hide();
       $(el).fadeIn('slow');

    }

});