使用删除或隐藏功能

时间:2012-04-14 17:35:52

标签: jquery

我理解如何在jQuery中使用删除/隐藏功能,但这对我来说有点棘手。

我有一个基于其选择的if语句的下拉列表。如果选择为0(这是默认值),则应删除日期时间文本框的父级div,其父级别为section_100

这样就删除了表单中该行的整个部分。显然,如果用户选择“否”(值为0),则它将保持删除状态,如果用户选择“是”,则显示整行,以便用户可以填写注释到期的日期时间。 / p>

http://jsfiddle.net/ZMHkG

有关于此的任何想法吗?

1 个答案:

答案 0 :(得分:1)

我对你提供的jsFiddle进行了一些更改,这就是我认为你要求的。您可以找到更新版本here(下面的代码)。

我使用.closest() jQuery函数来获取与<div>输入相关的#datetime元素的引用,因为它不是直接父级。

然后我更改了if语句以使用===运算符,该运算符在不修改类型的情况下比较值,并将要比较的值更改为字符串'0'而不是int 0

我删除了else if因为它似乎没有任何实际用途,你只想在值等于'0'时做某事;如果这不正确,你可以随时修改代码。


HTML:

<div class="section _100">
    <label for="comments">Allow Comments</label>
    <div>
        <select name="comments" id="comments">
            <option value="" selected="selected">Please Select An Option</option>
            <option value="0">No</option>
            <option value="1">Yes</option>
        </select>
    </div>
</div>
<div class="section _100">
    <label for="datetime">Date Comments Expire</label>
    <div>
        <input id="datetime" type="datetime" name="datetime" />
    </div>
</div>

jQuery的:

var dt= $("#datetime");
var dtparent = dt.closest('div.section._100');

$('#comments').change(function(){

    if($(this).val()==='0'){
        dt.val(''); //empty value
        dt.prop('disabled', true);
        dtparent.hide();
    }
    else{        
        dtparent.show();
        dt.removeAttr('disabled');                    
        dt.attr('validation','true');
    }    
});