0

我对 jQuery 很陌生，所以我遇到了麻烦。

我有根据选择的单选按钮显示或隐藏的 div，但是如果隐藏了 div，我无法弄清楚如何重置所有字段。

div 的日期输入字段带有 php 下拉菜单，在第一个选项中设置为 Null 或“”。在主切换的 div 中还有一些额外的单选按钮（有更多的日期选择/菜单） - 所以一个 div 中的 div 有更多的单选按钮......

最终，我想清除/重置任何隐藏的 div 中的所有内容。

这是我的 Jquery（我快要绝望了，一段时间后开始寻找直接的 javascript - 也不知道我在做什么）。

.desc 类是主要的单选按钮选项，它显示或隐藏具有各种其他选项的两个 div 之一。

    $(document).ready(function(){ 
    $("input[name='date']").change(function() {
        var test = $(this).val();
        $(".desc").hide();
        $("#"+test).show();
        $("input[type='hidden']").remove();
    }); 

    $("input[name='year']").change(function() {
        var test = $(this).val();
        $(".rnge").hide();
        $("#"+test).show();
        $("input[type='hidden']").remove();
    }); 
});

这是html（抱歉没有尽快添加。

<div id="formElementLeft">
    <h4>Date:</h4>
<p>Is this an exact or an approximate date?</p> 
    <p><input type="radio" name="date" value="exact"/>Exact</p>
    <p><input type="radio" name="date" value="circa"/>Approximate</p>   
</div>       
    <!--if exact show this-->
<div id="exact" class="desc" style="display:none;">
<p>Enter the exact date: <? echo date_picker(); ?><input type="radio" name="bce_ce"   value="BCE"/>BCE  <input type="radio" name="bce_ce" value="CE"/>CE</p>        
</div>
    <!--if approximate show this-->
<div id="circa" class="desc" style="display:none;">
    <p>Enter a date range.</p>             
    <p>is this a single year or a range of years?
    <p><input type="radio" name="year" value="single"/>Single year</p>
    <p><input type="radio" name="year" value="range"/>Range of years</p>        
    <div id="single" class="rnge" style="display:none;">
    <p><? echo year_picker(); ?></p>
    <p><? echo month_picker(); ?> (optional)</p></div>
    <div id="range" class="rnge" style="display:none;">
    <p>Between <? echo year_picker(); ?><input type="radio" name="bce_ce" value="BCE"/>BCE     <input type="radio" name="bce_ce" value="CE"/>CE;</p> 
    <p>and <? echo year_picker(); ?><input type="radio" name="bce_ce" value="BCE"/>BCE  <input type="radio" name="bce_ce" value="CE"/>CE</p></div>               
</div>

在此先感谢您帮助穷人，让我很困惑。

4

3 回答 3

2

如果.desc并且.rnge简单地包含input[type='text']字段，那么您可以执行以下操作：

$(".desc input, .rnge input").val("");

这会将文本输入值重置为空。

但是，如果您正在处理单选按钮，您可以这样做：

$(".desc input, .rnge input").prop("checked", false);

最后：假设您的列表中有一组输入，其中可能包括文本输入、单选按钮和选择列表（但您不一定知道是什么）。您可以通过执行类似的操作完全重置 DOM 元素。

$(".desc, .rnge").each(function() {
  $(this).html($(this).html());
}

请参阅此处的示例。这只是将 HTML 设置为当前状态，但这样做会擦除div. 这样做的好处是您的初始值可能不是空字符串。正如您所说，它们可能是诸如“null”之类的字符串，并且您的选择列表可能选择了一个您想要重置的默认选项。

于 2013-07-24T22:48:45.237 回答
0

感谢您的小费。它花了一天的时间离开它，用新鲜的眼光看着它，才能真正理解它的语法。最终我的修补导致了这个，它确实有效（我为自己感到骄傲）！我将 .html 方法嵌套在 .hide 方法中，因此 .html 方法将依赖于 .hide 方法。The trouble with the .each method was that it prevented the divs from showing at all when a radio button was selected.

$(document).ready(function(){ 
$("input[name='date']").change(function() {
    var test = $(this).val();
    $(".desc").hide(function(){
        $(this).html($(this).html());
        });     
    $("#"+test).show();
}); 

$("input[name='year']").change(function() {
    var test = $(this).val();
    $(".rnge").hide(function(){
        $(this).html($(this).html());
        }); 
    $("#"+test).show();     
});

} });

编辑：发现了一个小故障。使用 .desc 类对于其中一个 div 来说不够具体，因此它正在清除一些东西并且不允许打开一个 div。这更好，并且完全符合我的要求。为此，我必须将 .html 方法嵌套在第一个 .show 函数中，并指定一个 div id 而不是类以使其工作。

$(document).ready(function(){ 
    $("input[name='date']").change(function() {
        var test = $(this).val();
        $(".desc").hide();      
        $("#"+test).show(function(){
            $("#exact").html($("#exact").html());
            });
    }); 

    $("input[name='year']").change(function() {
        var test = $(this).val();
        $(".rnge").hide(function(){
            $(this).html($(this).html());
            }); 
        $("#"+test).show();     
    }); 
});
于 2013-07-29T13:59:05.220 回答
0

我有一组函数可以隐藏一个或多个 div 标签中包含的任何类型的字段。

ocultarSeccionesEn是执行所有字段的隐藏和清理的主要功能。这个函数调用 ocultarDOM 函数，它只是隐藏/显示 div 并调用limpiarCamposEnDOM。论据说明：

  • v_aplicar。这是应用隐藏/显示功能的条件（隐藏=真，显示=假）
  • 一个_选择器。这是用于标识要隐藏/显示的 div 的查找元素（“.[class name]”、“#[Id Name]”或任何其他类型的选择器）。这个参数必须是一个数组，如果只想定义一个 div，放在数组里面，比如：["#Div-Name"]
  • v_limpiar_campos。这只是一个标志，用于定义是否还想在隐藏字段时阻止它们
/**
 * Limpia y oculta todos los campos contenidos dentro del selector o selectores definidos el argumento tipo arreglo a_selector
 * @param {bool} v_aplicar  Condición si se va a aplicar la limpieza o no. En caso contrario, si la bandera v_limpiar_y_bloquear es verdadera, se desbloquean los campos únicamente
 * @param {array} a_selector    Arreglo con los textos para identificar la sección o div a limpiar, ejemplo:  con el id (#[nombre]) o la clase (.[nombre])
 * @param {bool} v_limpiar_campos   Bandera que indica si además de limpiar se va a hacer bloqueo de campos. Default es true. 
 */
function ocultarSeccionesEn(v_aplicar, a_selector, v_limpiar_campos = true){
    if(a_selector.length){
        a_selector.forEach(function(v_selector){
            ocultarDOM(v_aplicar, $(v_selector), v_limpiar_campos);
        });
    }
}

这是主函数中调用的函数。除了应用隐藏/显示之外，它还调用执行清理字段的函数

/**
 * Limpia y oculta todos los campos contenidos dentro del objeto DOM definido en el argumento o_DOM
 * @param {bool} v_aplicar
 * @param {Object} o_DOM
 * @param {bool} v_limpiar_y_bloquear
 */
function ocultarDOM(v_aplicar, o_DOM, v_limpiar_y_bloquear = true){
    if(o_DOM.length){
        limpiarCamposEnDOM(v_aplicar, o_DOM, v_limpiar_y_bloquear);
        o_DOM.each(function(){
            if(v_aplicar){
                $(this).hide(400);
            }else{
                $(this).show(400);
            }
        });
        
    }
}

这是清除所有类型字段的功能，包括使用小部件select2选择类型的字段

/**
 * Limpia todos los campos contenidos dentro del objeto tipo DOM o_DOM
 * @param {bool} v_aplicar  Condición si se va a aplicar la limpieza o no. En caso contrario, si la bandera v_limpiar_y_bloquear es verdadera, se desbloquean los campos únicamente
 * @param {Object} o_DOM    Objeto tipo DOM
 * @param {bool} v_limpiar_y_bloquear   Bandera que indica si además de limpiar se va a hacer bloqueo de campos. Default es true. 
 */
function limpiarCamposEnDOM(v_aplicar, o_DOM, v_limpiar_y_bloquear=true){
    if(o_DOM.length){
        o_DOM.each(function(){
            //var o_input = $(this).find("input");
            var o_input = $(this).find("input");    //Todos los campos input
            var o_select = $(this).find("select");  //Todos los campos select
            var o_textarea = $(this).find("textarea");  //Todos los campos textarea
            //Para campos input
            if(o_input.length){
                o_input.each(function(){
                    if($(this).attr('type') === 'checkbox' || $(this).attr('type') === 'radio'){
                        if(v_aplicar){
                            $(this).prop( "checked", false );
                        }
                    }else{
                        if(v_aplicar){
                            $(this).val("");
                        }
                    }
                });

                //Si además de aplicar limpieza se apliva bloqueo...
                if(v_limpiar_y_bloquear){
                    o_input.attr("disabled", v_aplicar);
                }
            }
            //Para campos textarea
            if(o_textarea.length){
                if(v_aplicar){
                    o_textarea.val("");
                }
                //Si además de aplicar limpieza se apliva bloqueo...
                if(v_limpiar_y_bloquear){
                    o_textarea.attr("disabled", v_aplicar);
                }
            }
            //Para campos select
            if(o_select.length){
                var o_select2 = $(this).find("select[class~='select2']");

                if(o_select2.length){
                    if(v_aplicar){
                        //El widget Select2 no permite limpiar los campos select, debido a eso, primero se debe destruir antes de limpiar el campo
                        o_select2.select2('destroy');
                    }else{
                        //Se vuelve a revertir habilitando de nuevo el widget Select2
                        o_select2.select2();
                    }
                }
                if(v_aplicar){
                    o_select.val("");
                }
                //Si además de aplicar limpieza se apliva bloqueo...
                if(v_limpiar_y_bloquear){
                    o_select.attr("disabled", v_aplicar);
                }else{
                    //Si no se va a bloquear, se vuelve a habilitar el widget Select2
                    if(o_select2.length){
                        o_select2.select2();
                    }
                }
            }
        });
    }
}
于 2021-01-03T22:53:06.953 回答