javascript - 循环遍历单选按钮并更改最近的 div、jquery 上的背景颜色

标签 javascript jquery html

我有一个 6 x 8 网格,本质上是同名“tselect”下的单选按钮。当页面加载时,我希望它们都运行类似于此的命令

$(this).closest('div').addClass('highlight', 300);

基本上通过在顶部添加新的 div 类来更改最接近的 div 的背景颜色。我尝试做一个 for 循环来遍历所有这些,但 jquery 命令没有执行。有什么想法吗?

编辑:添加代码...

<div id="sch_cal">
                <div id="sch_cal_column">
                    <div id="sch_cal_row">
                        <div id="sch_cal_time"><p class="ctime">8:00am</p></div>
                        <div style="height: 100%"><input class="ctime" type="radio" name="tselect"/></div>
                    </div>
                    <div id="sch_cal_row">
                        <div id="sch_cal_time"><p class="ctime">8:20am</p></div>
                        <div style="height: 100%"><input class="ctime" type="radio" name="tselect"/></div>
                    </div>
                    <div id="sch_cal_row">
                        <div id="sch_cal_time"><p class="ctime">8:40am</p></div>
                        <div style="height: 100%"><input class="ctime" type="radio" name="tselect"/></div>
                    </div>
                    <div id="sch_cal_row">
                        <div id="sch_cal_time"><p class="ctime">9:00am</p></div>
                        <div style="height: 100%"><input class="ctime" type="radio" name="tselect"/></div>
                    </div>
                    <div id="sch_cal_row">
                        <div id="sch_cal_time"><p class="ctime">9:20am</p></div>
                        <div style="height: 100%"><input class="ctime" type="radio" name="tselect"/></div>
                    </div>
                    <div id="sch_cal_row">
                        <div id="sch_cal_time"><p class="ctime">9:40am</p></div>
                        <div style="height: 100%"><input class="ctime" type="radio" name="tselect"/></div>
                    </div>
                    <div id="sch_cal_row">
                        <div id="sch_cal_time"><p class="ctime">10:00am</p></div>
                        <div style="height: 100%"><input class="ctime" type="radio" name="tselect"/></div>
                    </div>
                    <div id="sch_cal_row">
                        <div id="sch_cal_time"><p class="ctime">10:20am</p></div>
                        <div style="height: 100%"><input class="ctime" type="radio" name="tselect"/></div>
                    </div>
                </div>

最佳答案

如果您需要突出显示最近的 div,也许您需要类似以下内容:

$(this).closest('div').effect("highlight", {}, 300);

如果您想更改背景颜色,可以尝试:

$(this).closest('div').css( "background-color" , "red" )  

$(this).closest('div').addClass('highlight');

addClass不将第二个参数作为整数。

关于javascript - 循环遍历单选按钮并更改最近的 div、jquery 上的背景颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11302511/

相关文章:

javascript - Cordova CORS 调用无法正常工作

jquery - IE9 中不显示导航

java - 使用 Java 在网页中的众多可能选项中选择一个

HTML 和 CSS 将水平树旋转为垂直

html - 如何在 html/css 中拉伸(stretch)图像片段

javascript - PreventDefault 未按预期工作

Joomla 中的 JavaScript 冲突

javascript - 如何从其父元素中查找并解开元素?

javascript - 从多个按钮显示/隐藏 div 中的多个不同内容

javascript - 如何使用下拉选项隐藏和显示按钮?