Question

当我选择第一个选项时，我有3个选择两个隐藏和一个可见，当您按下另一个选项时出现另一个选项。所有这一切都在一个表中并使用jquery在manipulacion.js中创建一个新的行按钮文件计数器，我已将它添加到每个select的id中，而不仅仅是调用。错误是当我创建一个新行而不是改变我时，我打开控制台并且不检查任何错误。在这里我将我的代码附加在html和。 js可以复制它，让他们发现我错了。

代码html

<html>
<head>
</head>
<body>
<script type="text/javascript" src="jss/jquery-1.9.0.min.js"></script>
    <script type="text/javascript" src="manipulacion.js"></script>
<script>    
    $(document).ready(function () {
        $("#estado").change(function () {
            if ($("#estado").val() == 2) {
                $("#sino").show();
                $("#sexo").hide();            
            }
            if ($("#estado").val() == 3) {
                $("#sino").hide();
                $("#sexo").show();
            }
            });
            });
    </script>
    <table>
    <tr>
    <td>
    <select id="estado">
    <option value="1">Seleccione 1 opcion</option>
    <option value="2">Laboratorio</option>
    <option value="3">Datos Generales</option>
    </select>
    </td>
    <td>
    <!-- //laboratorio -->
    <select name="sino" id="sino"style="display:none">
    <option value="1">Si </option>
    <option value="2">No</option>
    </select>
    </td>
    <td>
    <!-- //datos generales -->
    <select name="sexo" id="sexo"  style="display:none">
    <option value="1">Masculino </option>
    <option value="2">Femenino</option>
    </select>
    </td>
    <td><input type="button" value="+" class="clsAgregarFila"></td>
    </tr>
    </table>
    </body>
    </html>

code manipulacion.js

//manipulacion 
var contLin=1
    $(document).ready(function () {
        $("#estado"+contLin).change(function () {      
            if ($("#estado"+contLin).val() == 2) {
                $("#sino"+contLin).show();
                $("#sexo"+contLin).hide();       
            }
            if ($("#estado"+contLin).val() == 3) {
                $("#sino"+contLin).hide();
                $("#sexo"+contLin).show();
            }
}           );



});


$(document).ready(function(){
    //evento que se dispara al hacer clic en el boton para agregar una nueva fila
    $(document).on('click','.clsAgregarFila',function(){
        //almacenamos en una variable todo el contenido de la nueva fila que deseamos
        //agregar. pueden incluirse id's, nombres y cualquier tag... sigue siendo html

        var strNueva_Fila='<tr>'+
'<td><select id="estado'+contLin+'"><option value="1">Seleccione 1 opcion</option><option value="2">Laboratorio</option><option value="3">Datos Generales</option></select></td>' +
'<td><select name="sino'+contLin+'" id="sino"style="display:none"><option value="1">Si </option><option value="2">No</option></select></td>'+
'<td> <select name="sexo'+contLin+'" id="sexo"  style="display:none"><option value="1">Masculino </option><option value="2">Femenino</option></select><td>'+
'<td><input type="button" value="+" class="clsAgregarFila"><input type="button" value="-" class="clsEliminarFila"></td>'+
'</tr>';

contLin++;

        var objTabla=$(this).parents().get(3);


        $(objTabla).find('tbody').append(strNueva_Fila);


        if(!$(objTabla).find('tbody').is(':visible')){

            $(objTabla).find('caption').click();
        }
    });


    $(document).on('click','.clsEliminarFila',function(){

        var objCuerpo=$(this).parents().get(2);
            if($(objCuerpo).find('tr').length==1){
                if(!confirm('Esta es el única fila de la lista ¿Desea eliminarla?')){
                    return;
                }
            }


        var objFila=$(this).parents().get(1);

            $(objFila).remove();
    });



});

Answer 1

问题是因为$("#estado"+contLin).change(function () {将函数绑定到元素#estado1（最初是contLin=1），但是当文档准备好并且元素{{1 }}不存在。

解决此问题的一种快速方法是将更改事件函数移动到#estado1正文中，以便在追加表格行时将新的更改函数绑定到新的$(document).on('click','.clsAgregarFila',function(){。但是这非常效率低下，我建议使用事件委派，您实际上已经将其用于#estadoX和.clsAgregarFila上的点击处理程序功能。

事件委托通过将处理函数绑定到已存在的父元素或祖先DOM元素来工作。然后在该元素上处理该事件，并将其（通过您指定的CSS选择器）委托给目标元素。

例如.clsEliminarFila表示当事件直接发生在绑定元素（$(document).on('click','.clsAgregarFila',function(){）上时不会调用处理程序，但仅适用于与选择器匹配的后代（内部元素）（所有元素都与document） - 请参阅.on()

所以你可以使用以下内容，它使用CSS属性选择器来匹配以 class="clsAgregarFila"开头的所有<select>元素。但是有一个小问题 - 它不会像这样......

id="estado"

...来自$(document).on('change', 'select[id^=estado]', function () { if ($("#estado"+contLin).val() == 2) { $("#sino"+contLin).show(); $("#sexo"+contLin).hide(); } if ($("#estado"+contLin).val() == 3) { $("#sino"+contLin).hide(); $("#sexo"+contLin).show(); } });，因为它是一个全局变量！我们真正想要的是在当前行上找到contLin == 2 s。因此，以下修正的函数应该可以工作，甚至可以更好地替换两个函数，删除代码重复： - ）

<select>

但是，进一步采用这种方法，您的代码可以像this demo一样重写。我删除了HTML字符串并使用.clone()添加了一行，简化了删除行，链接了事件处理并删除了元素计数器 - 而是替换为类。

<强>的JavaScript

 $(document).on('change', 'select[id^=estado]', function () {
      var estadoValue = parseInt(this.value);
      var rowSelects = $(this).closest('tr').find('select').slice(1);

      $(rowSelects[0]).toggle(estadoValue === 2);
      $(rowSelects[1]).toggle(estadoValue === 3);
});

HTML （注意：我添加了“ - ”$(function(){ var $tbody = $('tbody'); var strNueva_Fila = $tbody.find('tr:first'); $('tbody').on('change', 'select.estado', function() { var estadoValue = parseInt(this.value); var rowSelects = $(this).closest('tr').find('select').slice(1); $(rowSelects[0]).toggle(estadoValue === 2); $(rowSelects[1]).toggle(estadoValue === 3); }).on('click', 'input', function() { if (this.className === 'clsAgregarFila') { $tbody.append(strNueva_Fila.clone()); } else if (this.className === 'clsEliminarFila') { $(this).closest('tr').remove(); } buttonsToggle(); }); function buttonsToggle() { var $addButtons = $tbody.find('.clsAgregarFila'); var $removeButtons = $tbody.find('.clsEliminarFila'); // hide all $addButtons.hide(); $removeButtons.hide(); // show "-" button on all but first row $removeButtons.slice(0).show(); // but hide "-" if there is only 1 row if ($removeButtons.length === 1) { $removeButtons.hide(); } // show "+" button on last row only $addButtons.slice(-1).show(); } });以及<input>和<thead>元素。< / p>

<tbody>

希望这会有所帮助： - ）

用jquery隐藏并显示错误

1 个答案: