jquery highlight(change color) specific text 答案

【问题标题】：jquery highlights(change color) specific text jquery highlight(change color) specific text 
【发布时间】：2014-03-17 17:58:55
【问题描述】：

我是 jquery 的新手，但我正在尽力而为。这就是问题所在，我有这个“公式”，其中包含我提出的一些问题并且它工作正常。但是当那个人标记正确的选项时，我需要突出显示文本上的某些段落。

heres some part of the structure( if you want i'll put the whole thing) 


<p>  text  text  text  text  <p class="class1"> TEXT I NEED TO HIGHLIGHT WHEN DUDE SELECT'S RIGHT OPTION<p>  text  text  text  <p>

function verificaQuestao1(){
 resetaAlternativaQuestoes1();
 <!-- Letra A -->
 if($('#questao1_a').val()==4 ){         //if OPTION IS CORRECT
 mudaCorTextoParagrafo("#q1Alt_a","green",20);   //changes color to green
 $("#q1SimbCerto_a").show();                      // shows correct .jpg
 $("#q1SimbErrado_a").hide();                   //dont care
                         //HERE IS THE PART I SHOULD HIGHLIGHT SOME SPECIFIC <P ="CLASS> 
 }
 else{
 mudaCorTextoParagrafo("#q1Alt_a","red",20);enter code here
 $("#q1SimbCerto_a").hide();
 $("#q1SimbErrado_a").show();

【问题讨论】：

如果会有多个
元素，那么您应该添加一种替代方式来标识它们； ID 和/或姓名。这将允许您选择该特定元素，然后突出显示您可以调用 .css 并设置背景或前景色（或两者）。
那么您的问题到底是什么？如何为该段落形成选择器？如何设置CSS？高亮效果的最佳 CSS？

标签： jquery class highlight

【解决方案1】：

嗯，你的问题并不完全清楚。但这里有一个小演示让你开始：

HTML

<p>
    <b>Option 1:</b>  Dogs are <span id="o1">just as cool</span> as cats. <br>
    <b>Option 2:</b>  Dogs are <span id="o2">not as cool</span> as cats.
</p>
    <b><span id="comment">Please select the correct answer<span></b> 
    <br><br>

    <button type="button" id="b1">Option 1 is correct</button>
    <button type="button" id="b2">Option 2 is correct</button> 
    <br><br>
    <button type="button" id="b3">Show answers</button>

CSS

.correct { background-color:lime; }

.wrong   { background-color:red; }

#comment { background-color:silver; }

jQuery

$(document).ready(function() {

    $("#b1").click(function() {
          $("#o1").addClass('wrong');
          if ($("#o2").hasClass('correct')) { $("#o2").removeClass('correct'); }
          $("#comment").text('You have selected the wrong answer. Please try again');
    });

    $("#b2").click(function() {
          $("#o2").addClass('correct');
          if ($("#o1").hasClass('wrong')) { $("#o1").removeClass('wrong'); }
          $("#comment").text('That is correct!');
    });

    $("#b3").click(function() {
          $("#o1").addClass('wrong');
          $("#o2").addClass('correct');
          $("#comment").text('Don\'t cheat!');
    });
});

演示

你可以找到工作演示by clicking this link。

请注意，有很多方法可以实现您想要做的事情。如果您在检查我的代码后还有任何疑问，请确保您所问的内容简洁明了。

希望这对您有所帮助。祝你好运。

【讨论】：