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