当我选择第一个选项时，我有3个选择，其中两个隐藏，一个可见，当您按一个选项时，另一个选项显示第二个选项。所有这些都在一个表中，并使用 jquery 在 manipulacion.js 文件中创建一个新的行按钮，一个计数器，我已将其添加到每个选择的 id 中，而不仅仅是调用。错误是当我创建一个新行而不改变我时，我打开控制台并且不检查任何错误。 在这里我附上了我的 html 代码和。 Node.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>
代码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();
});
});
最佳答案
导致该问题的原因是$("#estado"+contLin).change(function () {正在将函数绑定(bind)到元素 #estado1 (从 contLin=1 开始)，但是当文档准备好并且该元素 #estado1 时，JavaScript 就会被执行。不存在。
解决此问题的一种快速方法是将更改事件函数移至 $(document).on('click','.clsAgregarFila',function(){以便将新的更改函数绑定(bind)到新的#estadoX当追加表行时。然而，这是非常效率低下，我建议使用事件委托(delegate)，您实际上已经在.clsAgregarFila上的点击处理函数中使用了事件委托(delegate)。和.clsEliminarFila .
事件委托(delegate)的工作原理是将处理函数绑定(bind)到已经存在的父级或祖先 DOM 元素。然后，该事件在该元素上进行处理，并向下委托(delegate)(通过您指定的 CSS 选择器)到目标元素上。
例如$(document).on('click','.clsAgregarFila',function(){意味着当事件直接发生在绑定(bind)元素 ( document ) 上时，不会调用处理程序，而仅针对与选择器匹配的后代(内部元素)(所有带有 class="clsAgregarFila" 的元素) - 请参阅 .on()
因此，您可以只需使用以下内容，它使用 CSS 属性选择器来匹配所有 <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因为它是一个全局变量!我们真正想要的是找到<select> 当前行上的 s。因此，以下修改后的函数应该可以工作，甚至可以更好地替换您的两个函数，从而消除代码重复:-)
$(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);
});
但是，进一步采用这种方法，您的代码可以重写为 this demo 。我已删除 HTML 字符串并使用 .clone() 添加行、简化删除行、链接事件处理并删除元素计数器 - 替换为类。
JavaScript
$(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();
}
});
HTML(注意:我添加了“-”<input>以及<thead>和<tbody>元素)。
<table>
<thead></thead>
<tbody>
<tr>
<td>
<select id="estado" class="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" class="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" class="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" style="display:none"/></td>
</tr>
</tbody>
希望这有帮助:-)
关于javascript - 使用 jquery 隐藏和显示错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15012844/