Question

我正在尝试动态创建依赖元素：2选择和一个复选框。选择：后面的字幕是创建的，取决于titulo的值复选框在之后创建并取决于subtitulo的值

每个元素都包含在它自己的内容中，我在运行时在函数resultsTitulo，resultsSubtitulo，resultsPuntos上创建。对于每一个，我检测它是否是第一次创建，创建，如果不是，我保持但破坏元素结构（即。$（“＃titulo”）。replaceWith（''）;）和再次重新创建它。所有元素都包含在另一个名为“info”（HTML文件）的主文件中

$(document).ready(function())初始化第一个选择并检测所有元素的状态变化。

我遇到以下问题：

1）我希望能够根据元素的类型检测事件的变化，即。 $("div.info").change(function () -> $("#titulo").change(function ()

然而，这不起作用。

2）我希望能够添加不在内部但在

内部的结构

$("div.info").append("<div class=\"tituloD\">");
$("div.info").append("Titulo: "); -> $("div.titulo").append("Titulo: ");

这也不起作用。

3）我不知道复选框是否会很好地创建......

var tituloCreado = "No";
var subtituloCreado = "No";
var puntosCreados = "No";
var temp = 0;

// Esta funcion recoge el json data de titulos y lo imprime en pantalla
function resultsTitulo(data) { 
    $("div.info").html('').show(); 


    //Si el título no se ha creado antes, se crea la estructura
    if(tituloCreado == "No"){
        $("div.info").append("<div class=\"tituloD\">");
        $("div.info").append("Titulo: ");
        $("div.info").append("<select id=\"titulo\">");
        $("#titulo").append("<option value='0'> Elige un titulo");

        //Rellenar el titulo con las posibles opciones
        $.each(data,function(index,value) { 
            $("#titulo").append('<option value="'+data[index].id+'">' + data[index].nombre + '</option>');
        });

        $("div.info").append("</select>"); 
        $("div.info").append("</div>");
        tituloCreado = "Si";
    }
    else{
        //Vaciar estructura
        $("#titulo").replaceWith('');

        //Crear estructura de nuevo
        $("div.info").append("<select id=\"titulo\">");
        $("#titulo").append("<option value='0'> Elige un titulo");

        //Rellenar el titulo con las posibles opciones
        $.each(data,function(index,value) { 
            $("#titulo").append('<option value="'+data[index].id+'">' + data[index].nombre + '</option>');
        });

        $("div.info").append("</select>");  
    }
    $("div.info").append("<br />");
    $("div.info").append("<br />");
} 



// Esta funcion recoge el json data de subtitulos y lo imprime en pantalla  
function resultsSubtitulo(data) { 

    //Si el subtítulo no se ha creado antes, se crea la estructura
    if(subtituloCreado == "No"){
        $("div.info").append("<div class=\"subtituloD\">");
        $("div.info").append("Subtitulo: ");
        $("div.info").append("<select id=\"subtitulo\">"); 
        $("#subtitulo").append("<option value='0'> Elige un subtitulo"); 
        $.each(data,function(index,value) {
            $("#subtitulo").append('<option value="'+data[index].id+'">' + data[index].nombre + '</option>');
        });
        $("div.info").append("</select>"); 
        $("div.info").append("</div>");
        subtituloCreado = "Si";
    }
    else{
        //Vaciar estructura
        $("#subtitulo").replaceWith('');

        //Crear estructura de nuevo
        $("div.info").append("<select id=\"subtitulo\">"); 
        $("#subtitulo").append("<option value='0'> Elige un subtitulo"); 

        $.each(data,function(index,value) {
            $("#subtitulo").append('<option value="'+data[index].id+'">' + data[index].nombre + '</option>');
        });
        $("div.info").append("</select>");
    }

} 

// Esta funcion recoge el json data de puntos importantes y lo imprime en pantalla  
function resultsPuntos(data) { 
//$("div.info").append(""); 
    //Si el punto no se ha creado antes, se crea la estructura
    if(puntosCreados == "No"){
        $("div.info").append("<div class=\"puntosD\">");
        $("div.info").append("Puntos importantes: ");

        $.each(data,function(index,value) {
            $("div.info").append('<input type=\"checkbox\" name="'+data[index].id+'" value="'+data[index].nombre+'"> '+data[index].nombre);
        });
        $("div.info").append("</div>");
        puntosCreados = "Si";
    }
    else{
        //Vaciar estructura
        $("#myCheckbox").replaceWith('');

        //Crear estructura de nuevo
        $.each(data,function(index,value) {
            $("div.info").append('<input type=\"checkbox\" name="'+data[index].id+'" value="'+data[index].nombre+'"> '+data[index].nombre);
        });
    }
}



//INICIO
$(document).ready(function(){ 
    $.ajax({ 
        data: "", 
        type: "GET", 
        dataType: "json", 
        url: "recogeTitulo.php", 
        success: function(data){ 
            resultsTitulo(data); 
        }
    });

    $("div.info").change(function (){
        $("div.info option:selected").each(function () {
            var value = $(this).val();               
                $.ajax({
                        data: "valor="+value, 
                        type: "GET", 
                        dataType: "json", 
                        url: "recogeSubtitulo.php", 
                        success: function(data){ 
                            resultsSubtitulo(data); 
                        } 
                });
        }); 
    }); 

});

Answer 1

感谢Marcelo的快速回复，这让我想起了我在做什么。除了一件事之外，一切都正常使用此代码：创建并显示复选框后：

$.each(data,function(index,value) {
$("div.puntosD").append('<input type=\"checkbox\" name="'+data[index].id+'" value="'+data[index].nombre+'"> '+data[index].nombre);

他们没有被淘汰和替换：

$("#checkbox").replaceWith('');

我该怎么做？

这是我的新代码。首先，我重写了我的HTML，将“info div”替换为：

<div class="tituloD">
</div>
<div class="subtituloD">
</div>
<div class="puntosD">
</div>

并重写了javascript的代码，希望现在我正在使用“追加”。

var tituloCreado = "No";
var subtituloCreado = "No";
var puntosCreados = "No";

// Esta funcion recoge el json data de titulos y lo imprime en pantalla
function resultsTitulo(data) { 
    $("div.tituloD").html('').show(); 


    //Si el título no se ha creado antes, se crea la estructura
    if(tituloCreado == "No"){
        $("div.tituloD").append("Titulo: ");
        $("div.tituloD").append("<select id=\"titulo\">");
        $("#titulo").append("<option value='0'> Elige un titulo");

        //Rellenar el titulo con las posibles opciones
        $.each(data,function(index,value) { 
            $("#titulo").append('<option value="'+data[index].id+'">' + data[index].nombre + '</option>');
        });

        $("div.tituloD").append("</select>"); 
        tituloCreado = "Si";
    }
    else{
        //Vaciar estructura
        $("#titulo").replaceWith('');

        //Crear estructura de nuevo
        $("div.tituloD").append("<select id=\"titulo\">");
        $("#titulo").append("<option value='0'> Elige un titulo");

        //Rellenar el titulo con las posibles opciones
        $.each(data,function(index,value) { 
            $("#titulo").append('<option value="'+data[index].id+'">' + data[index].nombre + '</option>');
        });

        $("div.tituloD").append("</select>");   
    }
    $("div.tituloD").append("<br />");
    $("div.tituloD").append("<br />");
} 



// Esta funcion recoge el json data de subtitulos y lo imprime en pantalla  
function resultsSubtitulo(data) { 

    //Si el subtítulo no se ha creado antes, se crea la estructura
    if(subtituloCreado == "No"){
        $("div.subtituloD").append("Subtitulo: ");
        $("div.subtituloD").append("<select id=\"subtitulo\">"); 
        $("#subtitulo").append("<option value='0'> Elige un subtitulo"); 
        $.each(data,function(index,value) {
            $("#subtitulo").append('<option value="'+data[index].id+'">' + data[index].nombre + '</option>');
        });
        $("div.subtituloD").append("</select>"); 
        subtituloCreado = "Si";
    }
    else{
        //Vaciar estructura
        $("#subtitulo").replaceWith('');

        //Crear estructura de nuevo
        $("div.subtituloD").append("<select id=\"subtitulo\">"); 
        $("#subtitulo").append("<option value='0'> Elige un subtitulo"); 

        $.each(data,function(index,value) {
            $("#subtitulo").append('<option value="'+data[index].id+'">' + data[index].nombre + '</option>');
        });
        $("div.subtituloD").append("</select>");
    }

} 

// Esta funcion recoge el json data de puntos importantes y lo imprime en pantalla  
function resultsPuntos(data) { 

    //Si el punto no se ha creado antes, se crea la estructura
    if(puntosCreados == "No"){
        $("div.puntosD").append("Puntos importantes: ");
        $.each(data,function(index,value) {
            $("div.puntosD").append('<input type=\"checkbox\" name="'+data[index].id+'" value="'+data[index].nombre+'"> '+data[index].nombre);
        });
        puntosCreados = "Si";
    }
    else{
        //Vaciar estructura
        $("#checkbox").replaceWith('');

        //Crear estructura de nuevo
        $.each(data,function(index,value) {
            $("div.puntosD").append('<input type=\"checkbox\" name="'+data[index].id+'" value="'+data[index].nombre+'"> '+data[index].nombre);
        });
    }
}



//INICIO
$(document).ready(function(){ 
    $.ajax({ 
        data: "", 
        type: "GET", 
        dataType: "json", 
        url: "recogeTitulo.php", 
        success: function(data){ 
            resultsTitulo(data); 
        }
    });

    //Eventhandler tituloD
    $("div.tituloD").change(function (){
        $("div.tituloD option:selected").each(function () {
            var value = $(this).val();               
                $.ajax({
                        data: "valor="+value, 
                        type: "GET", 
                        dataType: "json", 
                        url: "recogeSubtitulo.php", 
                        success: function(data){ 
                            resultsSubtitulo(data); 
                        } 
                });
        }); 
    }); 

    //Eventhandler subtituloD
    $("div.subtituloD").change(function (){
        $("div.subtituloD option:selected").each(function () {
            var value = $(this).val();               
                $.ajax({
                        data: "valor="+value, 
                        type: "GET", 
                        dataType: "json", 
                        url: "recogePuntos.php", 
                        success: function(data){ 
                            resultsPuntos(data); 
                        } 
                });
        }); 
    });     

});

JQuery事件处理依赖选择/复选框（代码含）

1 个答案: