堆棧內存溢出
  簡體   English   中英

在 jquery 中隱藏/顯示

[英]Hide / show in jquery

 原文  2015-10-28 12:57:55  1   1    javascript/ jquery

問題描述

我試圖隱藏所有 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

1 個解決方案

解決方案1
 0  2015-10-28 13:17:50

問題是在類似循環的場景中使用了閉包變量，變量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>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 使用jQuery顯示和隱藏 使用jQuery進行復雜的隱藏和顯示 帶隱藏/顯示的jquery屏幕 jQuery顯示/隱藏問題 使用jQuery顯示/隱藏div？ jQuery顯示/隱藏常見問題解答 jQuery顯示/隱藏問題 jQuery的隱藏和顯示HTML Javascript / JQuery隱藏和顯示 顯示和隱藏jQuery中的div
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM