1
Я динамически создаю ползунки (чтобы изменить цвет текста во вводе) и перетаскиваемый ввод с некоторым текстом. Я не знаю, почему, последний созданный слайдер работает с каждым входом, а какой-либо другой слайдер не работает. Как решить эту проблему? Каждый вход имеет класс coresponding к классу слайдера ...Динамически созданные слайдеры не работают за исключением последнего
<!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;
}
.container {
margin:20px;
}
.bl {
width:100px;
height:100px;
border-radius:10px;
display:block;
margin:5px;
float:left;
}
.mark:hover{ float:left; width: 50px; height: 50px; cursor: move; position: relative; left: 50px; background-image: url('cross.jpg'); background-repeat: no-repeat; border: 0px solid black; -webkit-opacity: 1; }
.mark{ float:left; width: 50px; height: 50px; padding-left: 30px; cursor: move; position: relative; left: 50px; background-image: url('cross.jpg'); background-repeat: no-repeat; border: 0px solid black; -webkit-opacity: 0.25; }
input { margin-left: 50px; height: 50px;}
.del {visibility: hidden;}
.mark:hover > .del {visibility: visible; cursor: pointer; position: relative; left: 35px; top: -50px; content: '*', font-weight: bold;}
.color_picker{ position: relative; float: right;}
#red1, #green1, #blue1,
#red2, #green2, #blue2,
#red3, #green3, #blue3,
#red4, #green4, #blue4,
#red5, #green5, #blue5,
#red6, #green6, #blue6,
#red7, #green7, #blue7 {
float: left;
clear: left;
width: 300px;
margin: 15px;
}
#red1, #red2, #red3 .ui-slider-range { background: #ef2929; !important }
#red1, #red2 .ui-slider-handle { border-color: #ef2929; }
#green1, #green2, #green3, #green4, #green5, #green6, #green7, #green8 .ui-slider-range { background: #8ae234; }
#green1, #green2, #green3, #green4, #green5, #green6, #green7, #green8 .ui-slider-handle { border-color: #8ae234; }
#blue1, #blue2, #blue3, #blue4, #blue5, #blue6, #blue7, #blue8 .ui-slider-range { background: #729fcf; }
#blue1, #blue2, #blue3, #blue4, #blue5, #blue6, #blue7, #blue8 .ui-slider-handle { border-color: #729fcf; }
</style>
<script>
$(document).ready(function() {
\t
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();
};
\t var i = 1;
$('.container').on('click', '.dodaj', function() {
$('<div class=mark ui-widget-content ><input type=text class="ui-state-active swatch'+i+'" value=This is input box><div class=del>*</div></div>').appendTo('.container').draggable();
$('<div id="red_val'+i+'">ss</div><div id="red'+i+'"></div><div id="green'+i+'"></div><div id="blue'+i+'"></div>').appendTo('.color_picker');
i++;
});
$(document).ready(function() {
\t var i = 0;
\t $('.container').on('click', '.dodaj', function() {
\t \t \t i++;
\t function refreshSwatch() {
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);
}
\t $(function() {
$("#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);
});
});
});
$('.container').on('click', '.del', function() {
\t $(this).parent('.mark').css("visibility", "hidden");
});
});
$(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":""});
});
\t $(".draggable").draggable();
\t $(".ui-state-active").resizable();
});
</script>
<body>
<div class="container">
<div class="dodaj">Add input</div> \t <div class="ukryj">Hide input</div> <div class="pokaz">Show</div>
<div class="color_picker"></div>
</div>
</body>
(http://stackoverflow.com/questions/1451009/javascript-infamous-loop-issue) - N o «реальный» цикл в вашем случае, но тот же эффект/проблема – Andreas