2

私はこのhtmlを持っています。

<tr>
    <td width="75">Mon</td>
    <td class="bn_time" width="60">
        <input id="mon_open" name="mon_open" class="time" placeholder="opening time" />
    </td>
    <td class="bn_time" width="10" align="center">-</td>
    <td class="bn_time" width="100">
        <input id="mon_close" name="mon_close" class="time" placeholder="closing time" />
    </td>
    <td colspan="3" align="center" class="bn_holiday" hidden>Holiday</td>
    <td>
        <input type="checkbox" name="mon_closed" id="mon_closed" class="bn_closed" />
        <label for="mon_closed">Closed</label>
    </td>
</tr>

私がやろうとしているのは、チェックボックスadd/remove' hidden attribute to`要素の変更イベントを使用することです。例えば。

if ('#bn_closed').is(':checked') {
    //hide all <td> element with class bn_time
    //show <td> element with class bn_holiday
} else {
    //show all <td> element with class bn_time
    //hide <td> element with class bn_holiday
}

これは私がjQueryを使ってやろうとしたことです。

$('.bn_closed').change(function() {
    var element = $(this);
    var id = element.attr('id');
    var day = id.slice(0,-7);
    var day_open = day+'_open';
    var day_close = day+'_close';
    if(element.is(':checked')) {
        //hide all <td> element with class bn_time
        //show <td> element with class bn_holiday
    } else {
        //show all <td> element with class bn_time
        //hide <td> element with class bn_holiday
    }
});

注意すべき重要な点があります。同じクラス名の要素が複数あります。テーブルにあるすべてではなく、兄弟だけの要素の属性を変更したい。

ありがとうございました。

4

1 に答える 1

3 
var checked = element.is(':checked');
var $td = element.closest("td");

$td.siblings(".bn_time").toggle(!checked);
$td.siblings(".bn_holiday").toggle(checked);
于 2012-08-23T14:24:02.107 に答える