Question

大家好，我被困在简单的js中。我不是完美的js.please帮助我。所以基本上我在打开和关闭div下拉选择在第一个div它的工作正常，但当我添加附加div时，它的jquery conflig与第一个div

<div class="  col-sm-12 col-xs-12 pull-left special_offers">

    <br>

        <h3> TRANSPORTATION  </h3>

   <div class="controls_special_offers"> 



    <div class="entry_special_offers input-group col-sm-12 col-xs-12 ">

            <div class="col-sm-3 col-xs-6"> 

                <div class="form-group">

                    <label for="exampleInputindate"> transportation type </label>

                     <div class="form-group">
                <select class="form_line_only form-control " name="tr_seattype"> 
                            <option selected> Select Type </option>
                             <option > 7 Seater </option>

                             <option > 15 Seater </option>

                             <option > 34 Seater </option>

                             <option > 50 Seater </option>

                    </select>

                    </div>

                </div>

            </div>




            <div class="col-sm-3 col-xs-6"> 

                <div class="form-group">

                    <label for="exampleInputindate"> Tour  </label>

                     <div class="form-group">
                        <select class="form_line_only form-control className" name="tr_cartype" id="transport_cat" > 
                            <option selected> Select Tour </option>
                             <option value="PVT"> PVT </option>

                             <option value="SIC"> SIC </option>



                    </select>

                    </div>

                </div>

            </div>
            <div class="col-sm-3 col-xs-6 rate">    

                <div class="form-group ">

                    <label for="exampleInputindate"> rate </label>

                     <div class="form-group">
                    <input type="number" name="tc_rate" id="tc_rate" class=" form_line_only form-control" placeholder="Enter Price" value="" autocomplete="off" >

                    </div>

                </div>

            </div>
            <div class="col-sm-3 col-xs-6 adult">   

                <div class="form-group">

                    <label for="exampleInputindate"> Adult </label>

                     <div class="form-group">
                    <input type="number" name="tc_adult" id="tc_adult" class=" form_line_only form-control" placeholder="Adult Price" value="" autocomplete="off" >

                    </div>

                </div>

            </div>

            <div class="col-sm-2 col-xs-6 child">   

                <div class="form-group">

                    <label for="exampleInputindate"> Child </label>

                     <div class="form-group">
                    <input type="number" name="tc_child" id="tc_child" class=" form_line_only form-control" placeholder=" Child Price " value="" autocomplete="off" >

                    </div>

                </div>

            </div>



                    <span class="input-group-btn day_plan pull-left">

                            <button class="btn btn-success  btn-add add_col" type="button">

                                <span class="glyphicon glyphicon-plus"></span>

                            </button>

                    </span>

                </div>

            <br>

                        </div>





    </div><!--special_offers-->





$("body").on("change", "#transport_cat", function(e) {
    e.preventDefault();
        if($(this).val() == 'PVT') {
            $('.rate').show(); 
        } else {
            $('.rate').hide(); 
        } 
        if($(this).val() == 'SIC') {
            $('.adult').show(); 
            $('.child').show(); 
        } else {
            $('.adult').hide();
            $('.child').hide();             
        } 
    });




    $(function()

{

    $(document).on('click', '.btn-add', function(e)

    {

        e.preventDefault();



        var controlForm = $('.controls_special_offers:first'),

            currentEntry = $(this).parents('.entry_special_offers:first'),

            newEntry = $(currentEntry.clone()).appendTo(controlForm);



        newEntry.find('input').val('');
$("body").on("change", "#transport_cat", function(e) {
    e.preventDefault();
        if($('#transport_cat').val() == 'PVT') {
            $('.rate').show(); 
        } else {
            $('.rate').hide(); 
        } 
        if($('#transport_cat').val() == 'SIC') {
            $('.adult').show(); 
            $('.child').show(); 
        } else {
            $('.adult').hide();
            $('.child').hide();             
        } 
    });
        controlForm.find('.entry_special_offers:not(:last) .btn-add')

            .removeClass('btn-add').addClass('btn-remove')

            .removeClass('btn-success').addClass('btn-danger')

            .html('<span class="glyphicon glyphicon-minus"></span>');

    }).on('click', '.btn-remove', function(e)

    {

        $(this).parents('.entry_special_offers:first').remove();



        e.preventDefault();

        return false;

    });

});

如果你想在这里看到演示jsfiddle demo

Answer 1

你在jquery中遇到了问题。如文档中所述，使用change功能和Select。

所有你需要做的很简单：

popen()

修改您必须对第二个$( ".className" ).change(function(e) { e.preventDefault(); if($(this).val() == 'PVT') { $('.rate').show(); } else { $('.rate').hide(); } if($(this).val() == 'SIC') { $('.adult').show(); $('.child').show(); } else { $('.adult').hide(); $('.child').hide(); } });函数应用更改，如下所示：

onchange

然而，有一个问题。问题是您正在访问具有相同类的两个$( ".className" ).change(function(e) { e.preventDefault(); if($(this).val() == 'PVT') { $('.rate').show(); } else { $('.rate').hide(); } if($(this).val() == 'SIC') { $('.adult').show(); $('.child').show(); } else { $('.adult').hide(); $('.child').hide(); } }); $(function() { $(document).on('click', '.btn-add', function(e) { e.preventDefault(); var controlForm = $('.controls_special_offers:first'), currentEntry = $(this).parents('.entry_special_offers:first'), newEntry = $(currentEntry.clone()).appendTo(controlForm); newEntry.find('input').val(''); $( ".className" ).change(function(e) { e.preventDefault(); if($('#transport_cat').val() == 'PVT') { $('.rate').show(); } else { $('.rate').hide(); } if($('#transport_cat').val() == 'SIC') { $('.adult').show(); $('.child').show(); } else { $('.adult').hide(); $('.child').hide(); } }); controlForm.find('.entry_special_offers:not(:last) .btn-add') .removeClass('btn-add').addClass('btn-remove') .removeClass('btn-success').addClass('btn-danger') .html('<span class="glyphicon glyphicon-minus"></span>'); }).on('click', '.btn-remove', function(e) { $(this).parents('.entry_special_offers:first').remove(); e.preventDefault(); return false; }); });标记，因此当仅选择select标记的一个选项时，将为两个标记显示输入标记。请查看此fiddle

附加的输入js不起作用

1 个答案: