javascript - 通过更改隐藏此选择框之后的元素

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绑定(bind)后的事件。

演示: http://jsfiddle.net/mPNCA/1/