我想突出显示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"
..值。
答案 0 :(得分:1)
$('.main-class').on('click', '.row-fluid', function() {
$(this).parent().find('.tiny').css('background-color', '');
$(this).parent().find('.tiny').css('background-color', '#00fff0');
});
答案 1 :(得分:1)
我会使用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>