在jquery中隐藏/显示
Hide / show in jquery
我试图隐藏所有div，只显示那些用"button"连接的div。发生的情况是，只有最后一个div可见——无论是否单击了开关div（作为按钮）。
编辑：整个html:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style type='text/css'>
html, body {
margin:0px;
padding:0px;
width:auto;
height:auto;
overflow: visible;
}
.container {
margin:20px;
}
.mark:hover{ cursor: move; -webkit-opacity: 1; }
.mark{ overflow: visible; float:left; width: 50px; height: 50px; padding-left: 10px; cursor: move; position: relative; left: 50px; border: 0px solid black; -webkit-opacity: 0.25; }
input { margin-left: 50px; overflow: visible;}
.del {visibility: hidden;}
.mark:hover:before > .del {visibility: visible; cursor: pointer; position: relative; left: 35px; content: '*', font-weight: bold;}
.color_picker, #slider{ position: relative; float: right;}
#slider1 { margin-top: 10px;}
#red1, #green1, #blue1,
#red2, #green2, #blue2,
#red3, #green3, #blue3,
#red4, #green4, #blue4,
#red5, #green5, #blue5,
#red6, #green6, #blue6,
#red7, #green7, #blue7,
#slider1, #slider2, #slider3, #slider4, #slider5, #slider6 {
float: left;
clear: left;
width: 300px;
margin: 3px;
}
#size1, #red1 .ui-slider-range, #red2 .ui-slider-range, #red3 .ui-slider-range, #red4 .ui-slider-range, #red5 .ui-slider-range, #red6 .ui-slider-range, #red7 .ui-slider-range, #red8 .ui-slider-range { background: #ef2929;}
#red1 .ui-slider-handle, #red2 .ui-slider-handle, #red3 .ui-slider-handle, #red4 .ui-slider-handle, #red5 .ui-slider-handle, #red6 .ui-slider-handle, #red7 .ui-slider-handle, #red8 .ui-slider-handle { border-color: #ef2929; }
#green1 .ui-slider-range, #green2 .ui-slider-range, #green3 .ui-slider-range, #green4 .ui-slider-range, #green5 .ui-slider-range, #green6 .ui-slider-range, #green7 .ui-slider-range, #green8 .ui-slider-range { background: #8ae234; }
#green1 .ui-slider-handle, #green2 .ui-slider-handle, #green3 .ui-slider-handle, #green4 .ui-slider-handle, #green5 .ui-slider-handle, #green6 .ui-slider-handle, #green7 .ui-slider-handle, #green8 .ui-slider-handle { border-color: #8ae234; }
#blue1 .ui-slider-range, #blue2 .ui-slider-range, #blue3 .ui-slider-range, #blue4 .ui-slider-range, #blue5 .ui-slider-range, #blue6 .ui-slider-range, #blue7 .ui-slider-range, #blue8 .ui-slider-range { background: #729fcf; }
#blue1 .ui-slider-handle, #blue2 .ui-slider-handle, #blue3 .ui-slider-handle, #blue4 .ui-slider-handle, #blue5 .ui-slider-handle #blue6 .ui-slider-handle, #blue7 .ui-slider-handle, #blue8 .ui-slider-handle { border-color: #729fcf; }
.da_font{
width: 1000%;
background: transparent !important;
}
.rel{ display: none;}
</style>
<script>
$(document).ready(function () {
function hexFromRGB(r, g, b) {
var hex = [
r.toString( 16 ),
g.toString( 16 ),
b.toString( 16 )
];
$.each( hex, function( nr, val ) {
if ( val.length === 1 ) {
hex[ nr ] = "0" + val;
}
});
return hex.join( "" ).toUpperCase();
};
var i = 0;
$('.container').on('click', '.dodaj', function () {
i++;
$('<div class="mark ui-widget-content klik'+i+'" ><div class="ui-state-active da_font swatch'+i+'" contenteditable="true">Sample text</div><div class=del>*</div></div>').appendTo('.container').draggable();
$('<div class="rel" id="red_val'+i+'"></div><div class="rel" id="red'+i+'" data-number="'+i+'"></div><div class="rel" id="green'+i+'" data-number="'+i+'"></div><div class="rel" id="blue'+i+'" data-number="'+i+'"></div><div class="rel" id="slider'+i+'" data-number="'+i+'" class="ui-slider"></div>').appendTo('.color_picker');
$(function() {
$('.da_font').resizable();
});
$( ".klik"+i ).click(function() {
$( ".rel" ).css("display", "none");
$( "#red_val"+i ).css("display", "inline");
$( "#red"+i ).css("display", "inline");
$( "#green"+i ).css("display", "inline");
$( "#blue"+i ).css("display", "inline");
$( "#slider"+i ).css("display", "inline");
});
$( "#slider"+i ).slider({
value:100,
min: 0,
max: 500,
step: 1,
slide: function( event, ui ) {
var element = ui.handle;
element = $(element);
var i = element.closest(".ui-slider").attr("data-number");
$( ".swatch"+i ).css( "font-size", ui.value );
}
});
$("#red"+ i + ", #green"+i + ", #blue"+i).slider({
orientation: "horizontal",
range: "min",
max: 255,
value: 127,
slide: refreshSwatch,
change: refreshSwatch
});
$( "#red"+i ).slider( "value", 255 );
$( "#green"+i ).slider( "value", 140 );
$( "#blue"+i ).slider( "value", 60 );
});
function refreshSwatch(event, ui ) {
var element = ui.handle;
element = $(element);
var i = element.closest(".ui-slider").attr("data-number");
var red = $( "#red"+i ).slider( "value" ),
green = $( "#green"+i ).slider( "value" ),
blue = $( "#blue"+i ).slider( "value" ),
hex = hexFromRGB( red, green, blue );
$( ".swatch"+i ).css( "color", "#" + hex );
$( "#red_val"+i ).text( "#" + hex );
}
});
$(document).ready(function edit() {
$('.container').on('click', '.ukryj', function x() {
$('.mark').css({"opacity":"1", "visibility":"hidden"});
$('.del').css("visibility","hidden");
$('.ui-state-active').css({"visibility":"visible", "border":"0px solid black"});
});
$('.container').on('click', '.pokaz', function () {
$('.mark').css({"opacity":"", "visibility":""});
$('.del').css("visibility","");
$('.ui-state-active').css({"visibility":"", "border":""});
});
$('.container').on('click', '.del', function () {
$(this).parent('.mark').css("visibility", "hidden");
$(this).css("visibility", "hidden");
$( "#red"+i ).css( "value", 255 );
$( "#green"+i ).css( "value", 140 );
$( "#blue"+i ).slider( "value", 60 );
});
});
</script>
<script>
</script>
<body>
<div class="container">
<div class="menu">
<div class="dodaj">Add input</div> <div class="ukryj">Hide input</div> <div class="pokaz">Show</div>
</div>
<div class="color_picker">
</div>
</div>
</body>
asdsdfs sdfsdfsdf sdfsdfsdf sdfsdfsd sdfsdffsf问题是在类似循环的场景中使用闭包变量，变量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");
});
$(document).ready(function() {
function hexFromRGB(r, g, b) {
var hex = [
r.toString(16),
g.toString(16),
b.toString(16)
];
$.each(hex, function(nr, val) {
if (val.length === 1) {
hex[nr] = "0" + val;
}
});
return hex.join("").toUpperCase();
};
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();
var $rel = $('<div class="rel-ct" data-number="' + i + '"><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></div>').appendTo('.color_picker');
$mark.find('.da_font').resizable();
$rel.find(".slider").slider({
value: 100,
min: 0,
max: 500,
step: 1,
slide: function(event, ui) {
$(ui.handle).closest('.rel-ct').find(".swatch").css("font-size", ui.value);
}
});
$rel.find(".red, .green, .blue").slider({
orientation: "horizontal",
range: "min",
max: 255,
value: 127,
slide: refreshSwatch,
change: refreshSwatch
});
$rel.find(".red").slider("value", 255);
$rel.find(".green").slider("value", 140);
$rel.find(".blue").slider("value", 60);
});
$('.container').on('click', '.klik', function() {
$(".rel-ct").hide();
$('.rel-ct[data-number="' + $(this).data('number') + '"]').css("display", "inline");
});
function refreshSwatch(event, ui) {
var $rel = $(ui.handle).closest('.rel-ct');
var red = $rel.find(".red").slider("value"),
green = $rel.find(".green").slider("value"),
blue = $rel.find(".blue").slider("value"),
hex = hexFromRGB(red, green, blue);
$('.mark[data-number="' + $rel.data('number') + '"] .swatch').css("color", "#" + hex);
$rel.find(".red_val").text("#" + hex);
}
});
$(document).ready(function edit() {
$('.container').on('click', '.ukryj', function x() {
$('.mark').css({
"opacity": "1",
"visibility": "hidden"
});
$('.del').css("visibility", "hidden");
$('.ui-state-active').css({
"visibility": "visible",
"border": "0px solid black"
});
});
$('.container').on('click', '.pokaz', function() {
$('.mark').css({
"opacity": "",
"visibility": ""
});
$('.del').css("visibility", "");
$('.ui-state-active').css({
"visibility": "",
"border": ""
});
});
$('.container').on('click', '.del', function() {
$(this).parent('.mark').css("visibility", "hidden");
$(this).css("visibility", "hidden");
$("#red" + i).css("value", 255);
$("#green" + i).css("value", 140);
$("#blue" + i).slider("value", 60);
});
});html,
body {
margin: 0px;
padding: 0px;
width: auto;
height: auto;
overflow: visible;
}
.container {
margin: 20px;
}
.mark:hover {
cursor: move;
-webkit-opacity: 1;
}
.mark {
overflow: visible;
float: left;
width: 50px;
height: 50px;
padding-left: 10px;
cursor: move;
position: relative;
left: 50px;
border: 0px solid black;
-webkit-opacity: 0.25;
}
input {
margin-left: 50px;
overflow: visible;
}
.del {
visibility: hidden;
}
.mark:hover:before > .del {
visibility: visible;
cursor: pointer;
position: relative;
left: 35px;
content: '*', font-weight: bold;
}
.color_picker,
#slider {
position: relative;
float: right;
}
#slider1 {
margin-top: 10px;
}
.red,
.green,
.blue,
.slider {
float: left;
clear: left;
width: 300px;
margin: 3px;
}
#size1,
.red .ui-slider-range {
background: #ef2929;
}
.red .ui-slider-handle {
border-color: #ef2929;
}
.green .ui-slider-range {
background: #8ae234;
}
.green .ui-slider-handle {
border-color: #8ae234;
}
.blue .ui-slider-range {
background: #729fcf;
}
.blue .ui-slider-handle {
border-color: #729fcf;
}
.da_font {
width: 1000%;
background: transparent !important;
}
.rel {
display: none;
}<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div class="container">
<div class="menu">
<div class="dodaj">Add input</div>
<div class="ukryj">Hide input</div>
<div class="pokaz">Show</div>
</div>
<div class="color_picker">
</div>
</div>相关文章：
- 在jquery中为显示/隐藏设置cookie
- PHP Javascript显示/隐藏按钮不工作
- 打开/关闭按钮以显示/隐藏内容
- 显示隐藏复选框
- 在bootstrap中显示隐藏特定的li
- JQuery上下文菜单显示/隐藏问题
- JQuery在单击时停止显示/隐藏
- HTML5在提交并显示所需标签后显示隐藏的表单元素
- 使用 jQuery 切换显示/隐藏
- 显示/隐藏有关模型更改的指令内容
- Bootstrap在页面加载缓慢时会立即显示隐藏的模式对话框
- 根据特定条件使用ng显示/ng隐藏来显示/隐藏元素
- 显示/隐藏不起作用
- 使用ng-hide根据条件显示/隐藏按钮
- 仅在第一个结果中显示/隐藏MySQL结果函数
- 显示/隐藏http://ftp链接
- 在显示/隐藏中单击时删除的文本
- 是否可以在不重新渲染的情况下显示/隐藏父对象中的元素
- 将页面内容向左移动时显示/隐藏右侧面板
- 显示/隐藏将不会加载
