Question

我有一个要求，我应该一次只能选择一个文本。当我选择文本时，应更改所选文本的背景颜色。为了实现这一点，我使用jquery。使用下面的代码，我可以更改所选文本的颜色，但我无法在给定的时间点将其限制为仅一个选择。

$（ “＃” + DIVID）.find（ '亮点。 '）removeClass（' 亮点。'）;

$（VAL）.addClass（ '突出'）;

我使用上面两个jquery代码限制在给定时间点只有一个选择，但它不起作用！

如果我在任何地方出错了，请纠正我！

以下代码段更清楚地解释了问题！

function check(val,divid){
$("#"+divid).find('.highlight').removeClass('.highlight');
$(val).addClass('highlight');	
}

.highlight{
background-color : blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id ="1">
<span id="a" onclick ="check(this,'1')">JAVA</span><br>
<span id="b" onclick ="check(this,'1')">ASP</span><br>
<span id="c" onclick ="check(this,'1')">C</span><br>
<span id="d" onclick ="check(this,'1')">C++</span><br>
</div>

<br>
<div id ="2">
<span id="e" onclick ="check(this,'2')">MATHS</span><br>
<span id="f" onclick ="check(this,'2')">ENGLISH</span><br>
<span id="g" onclick ="check(this,'2')">SOCIAL</span><br>
<span id="h" onclick ="check(this,'2')">SCIENCE</span><br>
</div>

Answer 1

删除Container功能中highlight前面的句号。

removeClass

function check(val,divid){
$("#"+divid).find('.highlight').removeClass('highlight');
$(val).addClass('highlight');	
}

.highlight{
background-color : blue;
}

Answer 2

.removeClass()中的点是您的问题。但如果我能建议你做一个更好的方法来做你想做的事情，那就如下所示。

如果您使用jQuery，请忘记内联onclick属性...并使用.on()注册您的事件处理程序。

＆＃13;

$("span").on("click",function(){
  $(this).siblings().removeClass("highlight");
  $(this).addClass("highlight");
});

＆＃13;

.highlight{
background-color : blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id ="1">
<span id="a">JAVA</span><br>
<span id="b">ASP</span><br>
<span id="c">C</span><br>
<span id="d">C++</span><br>
</div>

<br>
<div id ="2">
<span id="e">MATHS</span><br>
<span id="f">ENGLISH</span><br>
<span id="g">SOCIAL</span><br>
<span id="h">SCIENCE</span><br>
</div>

＆＃13;

Answer 3

Louys Patrice Bessette是对的并且给了你一个如何做到这一点的好例子，但我只想提供我的做法

但首先你需要给他们所有人上课。我更喜欢“技巧”

这将同时适用于 div

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id ="1">
    <span id="a" class="skill">JAVA</span><br>
    <span id="b" class="skill">ASP</span><br>
    <span id="c" class="skill">C</span><br>
    <span id="d" class="skill">C++</span><br>
</div>

<br>
<div id ="2">
    <span id="e" class="skill">MATHS</span><br>
    <span id="f" class="skill">ENGLISH</span><br>
    <span id="g" class="skill">SOCIAL</span><br>
    <span id="h" class="skill">SCIENCE</span><br>
</div>



$('.skill').on('click',function() {
    $(this).addClass('highlight').siblings().removeClass('highlight');
});

在div标签中一次只选择一个文本并更改所选文本的颜色

3 个答案: