Question

我想突出显示span(class="tiny")元素，当其div处于活动状态或单击其任何元素时...

我已经尝试突出显示该元素，但是没有成功。...只能突出显示整个div。...

$('.main-class').on('click', '.row-fluid', function() {
    $(this).parent().find('.tiny').css('background-color', '');
    $(this).css('background-color', '#00fff0');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="main-class">
    <div class="panel-body" style="border: 1px solid black;margin: 5px;">
        <div class="row-fluid">
            <a>
                <h1>One</h1>
            </a>
            <div class="col-md-1">
                <span>I am up</span><br>
                <span class="tiny">ID no -123395</span>

            </div>
            <div rel="tooltip" style="display: flex; justify-content: flex-end;">
                <div class="radio">
                    <label class="lead">
                        <input id="1" name="one" required="required" value="yes" type="radio">
                        Yes
                    </label>
                    <div class="radio">
                        <label class="lead">
                            <input id="1" name="one" required="required" value="No" type="radio">
                            No
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <br>


    <div class="panel-body" style="border: 1px solid black;margin: 5px;">
        <div class="row-fluid">
            <a>
                <h1>Two</h1>
            </a>
            <div class="col-md-1">
                <span>I am up</span><br>
                <span class="tiny">ID no -123987</span>

            </div>
            <div rel="tooltip" style="display: flex; justify-content: flex-end;">
                <div class="radio">
                    <label class="lead">
                        <input id="1" name="one" tabindex="1" required="required" value="yes" type="radio">
                        Yes
                    </label>
                    <div class="radio">
                        <label class="lead">
                            <input id="1" name="one" tabindex="1" required="required" value="No" type="radio">
                            No
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

要突出显示span class="tiny"中任何元素被激活时的.... class="panel-body" ..值。

Answer 1

 $('.main-class').on('click', '.row-fluid', function() {
            $(this).parent().find('.tiny').css('background-color', '');
            $(this).parent().find('.tiny').css('background-color', '#00fff0');
 });

Answer 2

我会使用CSS：

添加要突出显示的课程
单击时，从具有该类的任何元素中删除该类，然后将其添加到单击的元素中

显然（从注释中），尽管您的代码直接在css上调用$(this)，但您仍想找到.tiny，所以我也进行了更新。

如果由于某种原因您无法添加CSS（问题的早期版本说您不能），则可以使用JavaScript添加style元素。

示例：

$('.main-class').on('click', '.row-fluid', function() {
    $(".highlight").removeClass("highlight");
    $(this).parent().find(".tiny").addClass("highlight");
});

.highlight {
  background-color: #00fff0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="main-class">
    <div class="panel-body" style="border: 1px solid black;margin: 5px;">
        <div class="row-fluid">
            <a>
                <h1>One</h1>
            </a>
            <div class="col-md-1">
                <span>I am up</span><br>
                <span class="tiny">ID no -123395</span>

            </div>
            <div rel="tooltip" style="display: flex; justify-content: flex-end;">
                <div class="radio">
                    <label class="lead">
                        <input id="1" name="one" required="required" value="yes" type="radio">
                        Yes
                    </label>
                    <div class="radio">
                        <label class="lead">
                            <input id="1" name="one" required="required" value="No" type="radio">
                            No
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <br>


    <div class="panel-body" style="border: 1px solid black;margin: 5px;">
        <div class="row-fluid">
            <a>
                <h1>Two</h1>
            </a>
            <div class="col-md-1">
                <span>I am up</span><br>
                <span class="tiny">ID no -123987</span>

            </div>
            <div rel="tooltip" style="display: flex; justify-content: flex-end;">
                <div class="radio">
                    <label class="lead">
                        <input id="1" name="one" tabindex="1" required="required" value="yes" type="radio">
                        Yes
                    </label>
                    <div class="radio">
                        <label class="lead">
                            <input id="1" name="one" tabindex="1" required="required" value="No" type="radio">
                            No
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

使用代码添加style元素的示例：

$("<style>")
.text(".highlight { background-color: #00fff0; }")
.appendTo(document.head);
$('.main-class').on('click', '.row-fluid', function() {
    $(".highlight").removeClass("highlight");
    $(this).parent().find(".tiny").addClass("highlight");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="main-class">
    <div class="panel-body" style="border: 1px solid black;margin: 5px;">
        <div class="row-fluid">
            <a>
                <h1>One</h1>
            </a>
            <div class="col-md-1">
                <span>I am up</span><br>
                <span class="tiny">ID no -123395</span>

            </div>
            <div rel="tooltip" style="display: flex; justify-content: flex-end;">
                <div class="radio">
                    <label class="lead">
                        <input id="1" name="one" required="required" value="yes" type="radio">
                        Yes
                    </label>
                    <div class="radio">
                        <label class="lead">
                            <input id="1" name="one" required="required" value="No" type="radio">
                            No
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <br>


    <div class="panel-body" style="border: 1px solid black;margin: 5px;">
        <div class="row-fluid">
            <a>
                <h1>Two</h1>
            </a>
            <div class="col-md-1">
                <span>I am up</span><br>
                <span class="tiny">ID no -123987</span>

            </div>
            <div rel="tooltip" style="display: flex; justify-content: flex-end;">
                <div class="radio">
                    <label class="lead">
                        <input id="1" name="one" tabindex="1" required="required" value="yes" type="radio">
                        Yes
                    </label>
                    <div class="radio">
                        <label class="lead">
                            <input id="1" name="one" tabindex="1" required="required" value="No" type="radio">
                            No
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

突出显示活动DIV中的元素

2 个答案: