Question

此代码动态创建一组元素（四个输入）。一旦创建了一个元素（四个输入），您就可以选择/取消选择，当您选择一个元素时，将调出相应元素的编辑器。我已经创建了一个只隐藏第一个元素的函数。问题是我不能在不影响其他元素的情况下重新回归。

说明：

点击“价格”链接，即时创建一个元素（四个嵌套输入）选择元素（四个嵌套输入）以调出编辑器（一个输入和一个棕色小方块）。单击小棕色方块以隐藏元素的第一个输入（四个嵌套输入），这将隐藏第一个输入。我需要小棕色方块来隐藏并显示相同的输入。

点击此处查看完整代码：要查看问题，您必须创建多个元素才能找到。

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

Js / jQuery - 如何隐藏/显示动态创建的输入？

1 个答案: