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

Posted 2023-02-23

【中文标题】.js、css 或 html - 如何将对象更改为两种不同的颜色？

【英文标题】：.js, css or html - how change object to two different colors?

【发布时间】：2018-01-26 08:17:06

【问题描述】：

我在实验中问参与者是/否问题，他们通过按键 (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 中定义为一个类），但这也无济于事。

【问题讨论】：

这是功能失调的，因为您在 append(this.leftComment); 末尾有一个分号；

为什么要用jquery和mixin js？？我不清楚你的整体结构。

@Nawed Khan：好的，现在实验成功了，但它没有改变任何东西。

@Jonas w：我没有制作文件，我只是修改它们并编写我的最终实验文件。例如，如果你想设计一个在线阅读实验，它们就可以这样使用。我花了一点时间自己弄清楚结构。

@jira 这段代码写得不太好（或者至少是 sn-ps ypuve 提供的），你确定要搞砸这个吗？

【参考方案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

【讨论】：

是的，我相信是的。

非常感谢！我在 .css 文件中添加了新定义的类，并将 $("li)... 添加到 Question.js 文件中定义 leftComment, rightComment 的位置。它没有任何改变：if ((this.presentAsScale || this.presentHorizontally) && this.leftComment) var lcd = $(document.createElement("li")) .addClass(this.cssPrefix + "scale-comment-box") .addClass("red") //your suggestion .append(this.leftComment) this.xl.append(lcd); 可能是我的错误......

因为你已经有了一个 addClass 函数，把它改成 .addClass(this.cssPrefix+"scale-comment-box red") 并去掉 .addClass("red") 行.

嗯。我一定还是错过了什么。现在我也将span.fake-link 初始更改为绿色并添加了新更改，一切都恢复为蓝色。我看不到这是在哪里定义的。我怀疑您建议的更改在某处被覆盖，但我不知道在哪里，已经几个小时了。还是说改变它们是不可能的，因为它们被定义为不祥的“假链接”？

在您的浏览器中按 F12 并检查您尝试着色的特定元素以确定应用了哪些类。您还可以在这些工具中对 CSS 进行一些测试更改，看看最终是什么使它起作用。那时，更容易确定项目中需要更改代码的位置。您还应该尝试 Jonas w 的解决方案，看看是否能达到您想要的效果

【参考方案2】：

你可能会使用 jquerys css 函数：

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

【讨论】：

谢谢！我对 Javascript 很陌生，所以我不确定我是否正确。我试图将您的代码添加到 .js 脚本中，所以：var lcd = $(document.createElement("li")), ..., .append(this.leftComment); [YOUR CODE]; this.xl.append(lcd); 这并没有改变任何颜色，而是将 NO 移到下一行。将您的代码放在 this.xl.append(lcd); 没有任何改变。我想我在某个地方出错了。

@jira 如果真的需要变量 lcd （别处），可以在上面代码的第一行前加上 var lcd =

谢谢！不幸的是，它仍然没有改变任何东西。

我编辑了我的原始帖子，在底部添加了一些信息。