.js、css 或 html - 如何将对象更改为两种不同的颜色？

Question

我在实验中问参与者是/否问题，他们通过按键 (Y/N) 回答。现在，我想显示 YES 绿色和 NO 红色。

我正在使用 Ibex 农场执行此操作，您有一个 .js 格式的实验文件。在这个文件中，定义了“问题控制器”如下：

"Question", {
    as: [["Y","Yes"],["N","No"]],   //defines keys+answer displays
 }

在此行中添加 html 标记 <font-size>, <div style> 不起作用。 除此之外，还有一个 .css 文件，我可以在其中更改两个答案的颜色，但为两者赋予相同的颜色：

span.Question-fake-link {
color: #ff6600;   //changing this to red; both Yes and No are red now 
cursor: pointer;
}

第三个文件是 Question.js 文件，它定义问题控制器的行为和属性，超出其外观。我想在这里发帖太长了，而且我没有作者身份。但在那里，答案被定义为“左评论”和“右评论”。所以我尝试在（我希望的）相关位置添加第 4 行：

var lcd = $(document.createElement("li"))
                  .addClass(this.cssPrefix + "scale-comment-box")
                  .append(this.leftComment);                             
                  .document.getElementById("leftComment").style.color =   "red";    //added this, made experiment dysfunctional                    
this.xl.append(lcd);

有人知道如何单独更改颜色吗？

对不起，我知道这看起来一定很复杂，但也许有人可以指点我该怎么做...如果您需要更多脚本，请告诉我。

非常感谢。

编辑：在这里尝试了一些建议后，我发现答案不知何故为“span.fake-link”。也许这段代码 sn-p 可以提供帮助（第 1/2 行）：

var a = $(document.createElement("span")).addClass(this.cssPrefix + "fake-link");
        __Question_answers__[i] = ans;
        __Question_callback__ = function (i) {
            var answerTime = new Date().getTime();
            var ans = __Question_answers__[i];
            var correct = "NULL";
            if (! (t.hasCorrect === false)) {...}
             }

但是如何替换“span”或“fake-link”？我想我必须同时更换两者。删除 CSS 文件中的 span.fake-link 属性似乎没有帮助。

编辑：或者这可能是问题所在？

 if ((this.presentAsScale || this.presentHorizontally) && this.leftComment) {
        var lcd = $(document.createElement("li"))
            .addClass(this.cssPrefix + "scale-comment-box")
            .append(this.leftComment)                        
            .appendTo(this.xl)
       this.xl.append(lcd);
         }

我试图将“scale-comment-box”替换为“red”（之前在 css 中定义为一个类），但这也无济于事。

Answer 1

既然您已经在使用 Javascript，是否可以添加两个额外的 css 类？
一个可以是 .red，另一个是 .green，然后在创建时将这些类相应地附加到元素：

//CSS
.red{
   color:#F00;
}
.green{
   color:#0F0;
}
//javascript
//Your javascript seems to be a mix of jQuery and JS so I assume jQuery is imported.  If this is incorrect, you would need to use a raw javascript solution 
//Hint:  Look at document.getElementsByClassName and .classname += "red"
//jQuery version:
$("li").addClass("red") //for any items that need to be red.  replace red with green for the green items

Answer 2

你可能会使用 jquerys css 函数：

$("<li>")
.addClass(this.cssPrefix + "scale-comment-box")
.css({color:"red"})
.append(this.leftComment)                        
.appendTo(this.xl);