动态创建的滑块不能正常工作

时间：2015-10-27 13:13:14

标签： javascript jquery

我动态创建滑块（用于更改输入中文本的颜色）和带有一些文本的可拖动输入。我不知道为什么，最后创建的滑块适用于每个输入，而任何其他滑块都不起作用。如何解决这个问题呢？ 每个输入都有与滑块类相对应的类......

＆＃13;
＆＃13; 
<!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 () {
  	
    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 = 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 () {
	var i = 0;

	$('.container').on('click', '.dodaj', function () {
	    		i++;
  	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 );
  }
  
  	$(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 () {  
     	$(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":""});


    });
    
      	$(".draggable").draggable();
      	$(".ui-state-active").resizable(); 
       
    
});
</script>
  
  
<body>

<div class="container">
<div class="dodaj">Add input</div>	<div class="ukryj">Hide input</div> <div class="pokaz">Show</div>

<div class="color_picker"></div>
</div>
</body>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

请检查：

＆＃13;
＆＃13; 
<!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 () {
  	
    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 = 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+'" data-number="'+i+'"></div><div id="green'+i+'" data-number="'+i+'"></div><div id="blue'+i+'" data-number="'+i+'"></div>').appendTo('.color_picker');
      
      
      $("#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 );
      
        i++;
});




  	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 );
  }



     $('.container').on('click', '.del', function () {  
     	$(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":""});


    });
    
      	$(".draggable").draggable();
      	$(".ui-state-active").resizable(); 
       
    
});
</script>
  
  
<body>

<div class="container">
<div class="dodaj">Add input</div>	<div class="ukryj">Hide input</div> <div class="pokaz">Show</div>

<div class="color_picker"></div>
</div>
</body>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题