jquery - 使用删除或隐藏功能

Question

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

我有一个下拉菜单，其中包含基于其选择的 if 语句。如果选择是 0（这是默认值），它应该删除日期时间文本框的父 div，它具有 和 的section类_100。

这样，表格中该行的整个部分都将被删除。显然，如果用户选择“否”（值为0），则它会保持删除状态，如果用户选择“是”，则它会显示整行，以便用户可以填写评论过期的日期时间。

http://jsfiddle.net/ZMHkG

对此有什么想法吗？

Answer 1

我对您提供的 jsFiddle 进行了一些更改，这可以满足您的要求。您可以在此处找到更新版本（代码如下）。

我使用.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');
    }    
});