jQuery:var(s)设置三个函数

Question

经过长时间的搜索,我没有找到我要找的东西,或者如果我这样做,它对我正在做的事情不起作用,或者我不知道如何正确使用它.在所有情况下,我真的需要你的帮助.

我所做的是processing通过仅识别带有ID的div 来定义我的div,然后用jQuery编写其余的div.有很多代码,所以我会提出一个缩短版本.

HTML

<div id="blue" class='processing'>
    <div class="bar"></div>
    <div class="text">BLUE</div>
</div>

<div id="red" class='processing'>
    <div class="bar"></div>
    <div class="text">RED</div>
</div>

<div id="yellow" class='processing'>
    <div class="bar"></div>
    <div class="text">YELLOW</div>
</div>

jQuery的

$(".processing").click(function () {
    var $this  = $(this);
    var ID     = $this.attr('id');

    switch(ID){
        case "blue":
            var name      = $this.find(".text").text();
            var width     = 60;
            // some other var(s)
        break;
        case "red":
            var name      = $this.find(".text").text();
            var width     = 40;
            // some other var(s)
        break;
        case "yellow":
            var name      = $this.find(".text").text();
            var width     = 20;
            // some other var(s)
        break;
    }
    $this.find(".text").text("THE " + name);
    $this.find(".bar").css("width", width + "%");
    // some other complicated coding
});

解释代码的作用

这是简单的版本,所有div的html是相同的,但ID是不同的,textdiv也是.单击div后,代码将获取ID,然后将其与其匹配switch以获取正确的变量(比此更多的变量).假设用ID标记的div blue被点击,div被标记为class barinside blue,其宽度将根据更改为60%switch.如果red单击,则条的宽度red将更改为40%,依此类推.

所有重要变量都在click函数内部.我想要的是......

我想要的是

在点击之前,我希望用户能够将鼠标悬停在栏上,然后在不点击的情况下显示父母的文本,然后在鼠标离开后消失.

我知道如何使用函数,使用mouseenter和mouseleave.

问题

问题是......我将不得不使用变量3次.对于mouseenter,mouseleave和click.我怎么能这样做或者我应该怎么做变量,所以我将能够在这三个函数中使用它们而不重复它们.

该processingDIV是一个矩形,

该barDIV的背景是,

和textDIV是文本在处理吧.

图解说明:http://i.imgur.com/nFSrvy6.png

1提醒

在这个例子中,var我想在所有函数中使用width.但是在我的代码(长版本)中,不只是一个变量.

Answer 1

为什么不在对象中声明所有变量:

var data = {
    blue: {
        width: 60,
        // other variables
    },
    red: {
        width: 40,
        // other variables
    },
    yellow: {
        width: 20,
        // other variables
    }
}

然后,您可以在任何需要的地方使用数据对象:

var ID = $this.attr('id');
var width = data[ID].width;