JQuery обрабатывает события, зависящие от выбора / флажки (включая код) - PullRequest
Новая
       1

JQuery обрабатывает события, зависящие от выбора / флажки (включая код)

0 голосов
/ 20 января 2012

Я пытаюсь сделать зависимые элементы, созданные динамически: 2 выбора и один флажок. Выбирает: subtitulo создается после и зависит от значения titulo Флажок создается после и зависит от значения subtitulo

Каждый элемент содержится в своем собственном элементе, который я создаю во время выполнения для функций resultsTitulo, resultsSubtitulo, resultsPuntos. Для каждого я определяю, если это первый раз, когда он создается, для создания, если это не так, я сохраняю, но уничтожаю структуру элемента (то есть. $ ("# Titulo"). ReplaceWith ('');) и воссоздай это снова. Все элементы содержатся в другом главном, называемом «информация» (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); 
                        } 
                });
        }); 
    }); 

});

1 Ответ

0 голосов
/ 21 января 2012

Спасибо Марсело за ваш быстрый ответ, он заставил меня задуматься о том, что я делал. С этим кодом все работает правильно, кроме одного: после того, как флажки созданы и показаны: 

$.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, надеюсь, теперь я правильно использую «append». 

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); 
                        } 
                });
        }); 
    });     

});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...