Question

我正在制作一个用户可以更新开放时间的时间表。

我每天都选择“打开”或“关闭”，此后选择“来自”和“直到”的方框。

如果用户选择例如星期三：'关闭'，则选择框（此.time_row中的列表项）隐藏，我想这样做。

我每天的HTML：

<div class="time_row">
    <label>Monday:</label>
    <li>
        <select>
            <option value="open">Open</option>
            <option value="closed">Closed</option>
        </select>
    </li>
    <li>
        From:
    </li>
    <li>
        <select>
            <option value="00:00">00:00</option>
            <option value="01:00">01:00</option>
            etc
        </select>
    </li>   
    <li>
        Till:
    </li>
    <li>
        <select>
            <option value="00:00">00:00</option>
            <option value="01:00">01:00</option>
            etc
        </select>
    </li>       
</div><!--End time_row-->

我尝试用jQuery .slice()制作它，但是之后他隐藏了所有列表元素之后和之前的选择框？

// Account time table
$('.time_row select').change( function() {
    if( $(this).val() == 'closed' ) {
        $('.time_row li').slice(3).hide();  
    }
});

有人可以帮我这个吗？

谢谢！

Answer 1

我认为你正在寻找类似的东西：

$('.time_row').find('select:first').change(function() {
    $(this)
        .closest('.time_row')
        .find('li')
        .slice(1)
        .toggle(this.value === 'open');
}).change();

在change事件的本例中，您使用类<select>搜索.time_row最近的父元素。然后选取所有内部<li>元素，使用slice(1)从列表中删除第一个元素，并在条件this.value === 'open'上显示或隐藏其余元素。

您还应检查自己的标记，并将所有<li>元素放在<ul>中以使其有效。

在已更新回答中，我添加了正确的选择器以仅选择第一个<select>元素（忽略时间选择器）并添加默认状态并触发绑定后发生change事件。

DEMO： http://jsfiddle.net/mPNCA/1/

Answer 2

你可以做（未经测试）：

$(".time_row select:first").change(function() {
    if (this.value == "closed") {
        $(this).closest(".time_row").find("select").not(this).hide();
    }
});

通过更改隐藏此选择框后面的元素

2 个答案: