Question

我几乎想到了这一点。有人能帮助我吗？

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

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;}

JQUERY：

$('.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/

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

感谢

Answer 1

更改

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

分为：

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

或

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

这是example。

你的原因不起作用是因为你选择了所有这些。查看jQuery的DOM Traversal。

Answer 2

只需使用

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

DEMO.

使用Jquery定位当前类的实例

2 个答案: