Js/jQuery - 如何隱藏/顯示動態創建的輸入？

Question

此代碼即時創建一組元素（四個輸入）。一旦創建了一個元素（四個輸入），您可以選擇/取消選擇，當您選擇一個元素時，將會調出相應元素的編輯器。我做了一個函數來隱藏第一個元素。問題是我不能在不影響其他元素的情況下回歸。

說明：

點擊「價格」的鏈接，一個元素會在飛行（四個嵌套輸入）創建 選擇元素（四個嵌套輸入），彈出編輯器（一個輸入和棕色的小方形）。 單擊小褐色方塊隱藏元素的第一個輸入（四個嵌套輸入），並隱藏第一個輸入。 我需要小棕色方塊來隱藏和顯示相同的輸入。

轉到此處查看完整代碼： 要查看問題，您必須創建多個元素才能找出。

http://jsfiddle.net/yjfGx/13/

這是JS/jQuery的代碼，完整的代碼去上面的鏈接。

var _PriceID = 1; 
$('#Price').on('click',function(){ 

     var label = 'Price' 
     var Id = 'Price_'; 
        var P = $('<p class="inputContainer" />').fadeIn(100); 
        var l = $('<label />').attr({'for':Id + _PriceID, 'id':Id + _PriceID, 'class':'priceLb'}).text(label).after('<br/>'); 
        var l1 = $('<span class="dollar-sign" />').text('$').css({"font-family":"Arial", "color":"#333", "font-weight":"bold"}); 
        var input1 = $('<input />').attr({ 'type':'text', 'name':'', 'class':'inputs', 
                 'maxlength':'3', 'placeholder':'one', 
                 'id':Id + _PriceID, 'class':'pricePh-1' }) 
                 .css({ "width":"60px", "paddingLeft":"1.3em", "paddingRight":"0.2em", "margin":"3px" }); 

        var l2 = $('<span class="priceComma-1" />').text(',').css({"font-family":"Arial", "color":"#333", "font-weight":"bold"}); 
        var input2 = $('<input />').attr({ 'type':'text', 'name':'', 'class':'inputs', 'maxlength':'3', 
                 'placeholder':'two', 'id':Id + _PriceID, 'class':'pricePh-2' }) 
                 .css({ "width":"68px", "paddingLeft":"0.7em", "paddingRight":"0.2em", "margin":"3px" }); 
        var l3 = $('<span class="priceComma-2" />').text(',').css({"font-family":"Arial", "color":"#333", "font-weight":"bold"}); 
        var input3 = $('<input />').attr({ 'type':'text', 'name':'', 'class':'inputs', 'maxlength':'3', 
                 'placeholder':'three', 'id':Id + _PriceID, 'class':'pricePh-3' }) 
                 .css({ "width":"64px", "paddingLeft":"1em", "paddingRight":"0.2em", "margin":"3px" });                           var l4 = $('<span />').text(',').css({"font-family":"Arial", "color":"#333", "font-weight":"bold"}); 
        var input4 = $('<input />').attr({ 'type':'text', 'name':'', 'class':'inputs', 'maxlength':'2', 
                 'placeholder':'four', 'id':Id + _PriceID, 'class':'pricePh-4' }) 
                 .css({ "width":"37px", "paddingLeft":"0.5em", "paddingRight":"0.2em", "margin":"3px" }); 

        P.append(l, l1, input1, l2, input2, l3, input3, l4, input4); 
        var D = $('form'); 
         P.on({ 
          mouseenter: function() { 
           $(this).addClass("pb"); 
          }, 
          mouseleave: function() { 
           $(this).removeClass("pb"); 
          } 
         }); 
         P.appendTo(D); 
         _PriceID++; 


}); 



/*** Select element individually and load editor. ***/ 
var flag = false; 
$("form").on("click", "p", function() { 
var cur = $(this).css("background-color"); 

if (cur == "rgb(255, 255, 255)") { 
    if (flag == false) { 
     $(this).css("background-color", "#FDD"); 


     LoadPriceProperties($(this)); 
     flag = true; 

    } 



} else { 
$(this).css("background-color", "white"); 
$('.properties-panel').hide(); 

flag = false; 
} 

}); 


/*** Element editor ***/ 
var LoadPriceProperties = function (obj) { 
$('.properties-panel').css('display', 'none'); 
$('#priceProps-edt').css('display', 'block'); 


var label = $('.priceLb', obj); 
var price1 = $('.pricePh-1', obj); 
var price2 = $('.pricePh-2', obj); 


$('#SetPricePlaceholder-1').val(price1.attr('placeholder')); 
$('#SetPricePlaceholder-2').val(price2.attr('placeholder')); 

/*** Getting an answer, depending on what they click on. ***/ 
$('#fieldOptionsContainer_1 div').bind('click', function() { 
if ($(this).hasClass('field-option-delete')) { 
    RemoveUnwantedPriceField1($(this)); 
} else { 
/*** Function loacated on "line 98" ***/  
HideUnwantedPriceField_1($(this)); 
} 
}); 

_CurrentElement = obj; 
}; 

function HideUnwantedPriceField_1() { 

var input = $('.pricePh-1', _CurrentElement); 
var comma = $('.priceComma-1', _CurrentElement); 


if($(input).is(":hidden")){ 


} else { 
input.hide(); 
comma.hide(); 
} 



} 

Answer 1

你的意思是這樣的：http://jsfiddle.net/Zaf8M/

var items=$('.m>li'), set= $('.set input'), num=0, item=$('.item'), list=$('.list'); 
item.hide(); 
items.click(function(){ 
    $(this).addClass('sel').siblings().removeClass('sel'); 
    num=$(this).index()+1; 
    set.prop("disabled", false); 
}); 

$('.close').click(function(){alert(3);}); 




$(window).click(function(e){ 
    if(e.target.className=='sel' || e.target.type=='text'){return;} 
    else { 
    items.removeClass('sel'); set.prop("disabled", true); 
    } 
    if(set.val()!='') { 
      item.clone().show() 
      .appendTo(list).children('.n').text(num) 
      .siblings('.p').text(set.val()); 
     set.val(''); 
    } 
    if(e.target.className=='close'){$(e.target).parent().remove();}; 
});