0

我几乎想通了。有人能帮我吗？

我似乎无法弄清楚如何只针对当前的复选框和文本，而不是代码中的每个实例。基本上我要做的是，如果单击复选框，则更改文本的值以及向其添加类。

HTML：

<div class="dependents">
    <ul>
        <li>
            <div>
                <h5>You <span>(covered)</span></h5>
            </div>
            <div>
                <p>(born Feb 2, 1976)</p>
            </div>
            <div>
                <a href="#">Edit Details</a>
            </div>
        </li>
        <li>
            <div>
                <h5><input type="checkbox" name="dependents"> Jane <span>(not covered)</span></h5>
            </div>
            <div>
                <p>Spouse <span>(born Oct 20, 1973)</p>
            </div>
            <div>
                <a href="#">Edit Details</a>
            </div>
        </li>
        <li>
            <div>
                <h5><input type="checkbox" name="dependents"> Mark <span>(not covered)</span></h5>
            </div>
            <div>
                <p>Spouse <span>(born Nov 11, 2003)</p>
            </div>
            <div>
                <a href="#">Edit Details</a>
            </div>
        </li>
        <li>
            <div>
                <h5><input type="checkbox" name="dependents"> Susan <span>(not covered)</span></h5>
            </div>
            <div>
                <p>Spouse <span>(born Sep 22, 2000)</p>
            </div>
            <div>
                <a href="#">Edit Details</a>
            </div>
        </li>
    </ul>
</div>

CSS：

* { margin: 0; padding: 0;}
.dependents {}
.dependents > ul { }
.dependents > ul > li { padding: 22px 11px; border-bottom: 1px dotted #c5c6c7; list-style: none; display: block;}
.dependents > ul > li > div { float:left; width: 33.33%;}
.dependents > ul > li > div:last-child { float:right; text-align: right;}
.dependents > ul > li > div > h5 > span { color: #ff0000;}
.dependents > ul > li > div > h5 > span.covered { color: #090;}

查询：

$('.dependents > ul > li > div > h5 > input').click(function(){
    var $depCov = $('.dependents > ul > li > div > h5 > span');

    $depCov.toggleClass('covered');
    if ($depCov.html() == "(covered)")
        $depCov.html('(not covered)');
    else
        $depCov.html('(covered)');
});

我在 jsfiddle 上发布了一个演示：http: //jsfiddle.net/YbhKy/7/

任何其他建议都会很乐意接受。

谢谢

4

2 回答 2

1

改变

var $depCov = $('.dependents > ul > li > div > h5 > span');

进入：

var $depCov = $(this).parent().find('span');

或者

var $depCov = $(this).next('span');

这是一个例子。

你的不工作的原因是因为你选择了所有这些。查看 jQuery 的DOM 遍历。

于 2013-08-30T23:17:54.280 回答
1

只需使用

var $depCov = $(this).next('span');

演示。

于 2013-08-30T23:19:56.440 回答