Javascript 在jquery中隐藏/显示

我试图隐藏所有div，只显示那些与“button”连接的div。所发生的事情是只有最后一个div是可见的-无论witch div（作为一个按钮）被点击

编辑：整个html：

html，正文{
边际：0px；
填充：0px；
宽度：自动；
高度：自动；
溢出：可见；
}
.集装箱{
利润率：20px；
}
.mark:hover{cursor:move；-webkit不透明性：1；}
.mark{溢出：可见；浮动：左；宽度：50px；高度：50px；左填充：10px；光标：移动；位置：相对；左：50px；边框：0px纯黑色；-webkit不透明度：0.25；}
输入{左边距：50px；溢出：可见；}
.del{可见性：隐藏；}
.mark:hover:before>.del{可见性：可见；光标：指针；位置：相对；左：35px；内容：'*'，字体大小：粗体；}
.color_picker，#滑块{位置：相对；浮动：右；}
#滑块1{页边距顶部：10px；}
#红色1、#绿色1、#蓝色1、，
#红色2、#绿色2、#蓝色2、，
#红色3、#绿色3、#蓝色3、，
#红色4、#绿色4、#蓝色4、，
#红色5、#绿色5、#蓝色5、，
#红色6、#绿色6、#蓝色6、，
#红色7、#绿色7、#蓝色7、，
#滑块1、滑块2、滑块3、滑块4、滑块5、滑块6{
浮动：左；
清除：左；
宽度：300px；
保证金：3倍；
}
#大小1、#red1.ui滑块范围、#red2.ui滑块范围、#red3.ui滑块范围、#red4.ui滑块范围、#red5.ui滑块范围、#red6.ui滑块范围、#red7.ui滑块范围、#red8.ui滑块范围{背景：#ef2929；}
#red1.ui滑块句柄、#red2.ui滑块句柄、#red3.ui滑块句柄、#red4.ui滑块句柄、#red5.ui滑块句柄、#red6.ui滑块句柄、#red7.ui滑块句柄、#red8.ui滑块句柄{边框颜色：#ef2929；}
#green1.ui滑块范围，#green2.ui滑块范围，#green3.ui滑块范围，#green4.ui滑块范围，#green5.ui滑块范围，#green6.ui滑块范围，#green7.ui滑块范围，#green8.ui滑块范围{背景：#8ae234；}
#green1.ui滑块句柄、#green2.ui滑块句柄、#green3.ui滑块句柄、#green4.ui滑块句柄、#green5.ui滑块句柄、#green6.ui滑块句柄、#green7.ui滑块句柄、#green8.ui滑块句柄{边框颜色：#8ae234；}
#blue1.ui滑块范围、#blue2.ui滑块范围、#blue3.ui滑块范围、#blue4.ui滑块范围、#blue5.ui滑块范围、#blue6.ui滑块范围、#blue7.ui滑块范围、#blue8.ui滑块范围{背景：#729fcf；}
#blue1.ui滑块句柄、#blue2.ui滑块句柄、#blue3.ui滑块句柄、#blue4.ui滑块句柄、#blue5.ui滑块句柄#blue6.ui滑块句柄、#blue7.ui滑块句柄、#blue8.ui滑块句柄{边框颜色：#729fcf；}
.da_字体{
宽度：1000%；
背景：透明！重要；
}
.rel{display:none；}
$（文档）.ready（函数（）{
函数hexFromRGB（r，g，b）{
变量十六进制=[
r、 toString（16），
g、 toString（16），
b、 toString（16）
];
$。每个（十六进制，函数（nr，val）{
如果（val.length==1）{
十六进制[nr]=“0”+val；
}
});
返回hex.join（“”.toUpperCase（）；
};
var i=0；
$（'.container'）。在（'click'，'.dodaj'，函数（）{
i++；
$（'Sample text*'）.appendTo（'.container'）.draggable（）；
$（''）.appendTo（'.color_-picker'）；
$（函数（）{
$（'.da_font'）。可调整大小（）；
});
$（“.klik”+i）。单击（函数（）{
$（“.rel”）.css（“显示”、“无”）；
$（“#red_val”+i）.css（“显示”、“内联”）；
$（“#红色”+i）.css（“显示”、“内联”）；
$（“#绿色”+i）.css（“显示”、“内联”）；
$（“#蓝”+i）.css（“显示”、“内联”）；
$（“#滑块”+i）.css（“显示”、“内联”）；
});
$（“#滑块”+i）.滑块({
数值：100，
分:0,，
最高：500，
步骤：1，
幻灯片：功能（事件、用户界面）{
var元素=ui.handle；
元素=$（元素）；
var i=元素。最近的（“.ui滑块”）.attr（“数据编号”）；
$（“.swatch”+i.css（“字体大小”，ui.value）；
}
});
$（“#红色“+i+”，#绿色“+i+”，#蓝色“+i）.滑块({
方向：“水平”，
射程：“分钟”，
最高：255，
价值：127，
幻灯片：刷新样本，
更改：刷新样本
});
$（#红色“+i）.滑块（“值”，255）；
$（“#绿色”+i）.滑块（“值”，140）；
$（“#蓝”+i）.滑块（“值”，60）；
});
函数刷新样例（事件、ui）{
var元素=ui.handle；
元素=$（元素）；
var i=元素。最近的（“.ui滑块”）.attr（“数据编号”）；
var red=$（“#red”+i）.滑块（“值”），
绿色=$（“#绿色”+i）.滑块（“值”），
蓝色=$（“#蓝色”+i）.滑块（“值”），
hex=hexFromRGB（红色、绿色、蓝色）；
$（“.swatch”+i）.css（“颜色”，“#”+hex）；
$（“#red#u val”+i）.text（“#”+hex）；
}
});
$（文档）.ready（函数编辑（）{
$（'.container'）。在（'click'，'.ukryj'，函数x（）上{
$（'.mark'）.css（{“不透明度”：“1”，“可见性”：“隐藏”}）；
$（'.del'）.css（“可见性”、“隐藏”）；
$（'.ui state active'）.css（{“可见性”：“可见”，“边框”：“0px纯黑色”}）；
});
$（'.container'）。在（'click'，'.pokaz'，函数（）{
$（'.mark'）.css（{“不透明度”：“可见性”：“}）；
$（'.del'）.css（“可见性”，”）；
$（'.ui state active'）.css（{“可见性”：“边框”：“}）；
});
$（'.container'）。在（'单击'，'.del'，函数（）{
$（this）.parent（'.mark'）.css（“可见性”、“隐藏”）；
$（this.css（“可见性”、“隐藏”）；
$（#red+i）.css（“value”，255）；
$（#绿色+i）.css（“值”，140）；
$（“#蓝”+i）.滑块（“值”，60）；
});
});
添加输入隐藏输入显示
asdsdfs sdfsdfsdfsdfs sdfsdfs sdfsdfsd sdfsdfsfsf

问题在于在类似循环的场景中使用闭包变量，变量

i

在所有单击处理程序之间共享

var i = 0;
$('.container').on('click', '.dodaj', function () {
    i++;
    var $mark = $('<div class="mark ui-widget-content klik" data-number="' + i + '"><div class="ui-state-active da_font swatch" contenteditable="true">Sample text</div><div class=del>*</div></div>').appendTo('.container').draggable();
    $('<div class="rel red_val" data-number="' + i + '"></div><div class="rel red" data-number="' + i + '"></div><div class="rel green" data-number="' + i + '"></div><div class="rel blue" data-number="' + i + '"></div><div class="rel slider ui-slider" data-number="' + i + '"></div>').appendTo('.color_picker');
    $mark.find('.da_font').resizable();
});

$('.container').on('click', '.klik', function(){
    $(".rel").hide();
    $('.rel[data-number="'+$(this).data('number')+'"]').css("display", "inline");
});

添加输入
隐藏输入
显示

为什么有多个版本的jquery这个版本也不能按我的要求工作。什么时候