Question

我是jQuery的新手，我需要帮助。对于我们在大学的团队项目，我们正在制作一个移动应用程序，用于创建可以添加标题，内容等的笔记。

在音符对象中，我们想要添加一个按钮，允许用户使用5种不同颜色的批量更改音符背景的颜色：红色，蓝色，绿色，橙色，紫色。

现在，当您点击“颜色”按钮时会发生这种情况：http://imgur.com/a/17Pet

我想这样做，当点击其中一种颜色时，音符的颜色会变为该颜色，按钮弹出窗口会关闭。

你可以帮帮我吗？我该怎么做？这是代码：

curl -ik \
     -H "Authorization: Bearer $(cat /var/run/secrets/kubernetes.io/serviceaccount/token)" \
     https://kubernetes.default.svc.cluster.local/api/v1/namespaces/default/pods

所有内容都会通过function addNewNote(className, title, content) { // if class is not specified, use a random colour class if (!className) { className = "colour" + Math.ceil(Math.random() * 5); } // add a new note to the end of the list notes.append( "<li>" + "<div class='" + className + "' >" + "<img class='hide' src='images/close.png'/>" + "<textarea class='note-title' placeholder='New Note' maxlength='10'/>" + "<textarea class='note-content' placeholder='Start typing...'/>" + "<button>" + "<a href='#myPopup' data-rel='popup' class='note-button'>Color</a>" + "<div data-role='popup' id='myPopup'>" + "<h5>Choose colour:</h5>" + "<a href class='red'>Red</a>" + "<a href class='green'>Green</a>" + "<a href class='blue'>Blue</a>" + "<a href class='orange'>Orange</a>"+ "<a href class='purple'>Purple</a>" + "</div>" + "</button>" + "</div>" + "</li>" ); // get the new note that's just been added and attach the click event handler to its close button var newNote = notes.find("li:last"); newNote.find("img").click(function () { // remove the note and save newNote.remove(); saveNotes(); }); // hook up event handlers to show/hide close button as appropriate addNoteEvent(newNote); // if a title is provided then set the title of the new note if (title) { // get the title textarea element and set its value newNote.find("textarea.note-title").val(title); } // if a content is provided then set the content of the new note if (content) { // get the content textarea element and set its value newNote.find("textarea.note-content").val(content); } // save saveNotes(); }添加到注释中，其他所有内容都会被评论，希望它可以帮助您了解其工作原理。

首先使用以下行随机创建注释的颜色：

notes.append()

在CSS中，有// if class is not specified, use a random colour class if (!className) { className = "colour" + Math.ceil(Math.random() * 5); }，ul li div.colour1等等直到5.（无法发布截图，我没有10个代表）

我该怎么做？

对于这篇长篇文章感到抱歉，我希望这是可以理解的。如果需要，请随时提问。

Answer 1

尝试做类似的事情：

$(/* your query */).css('color', 'red');

或最终：

$(/* your query */).css('background-color', 'red');

Answer 2

您可以在html标记中使用data属性并使用相应的颜色名称或Hax代码。请记住，如果您要直接使用颜色名称，那么它应该直接以样式提供。

我个人更喜欢Hax代码。

https://jsfiddle.net/tLtst05w/1/

这里的例子

HTML

<div>
<a id="linkbackclr">hi</a>
<b>testing</b>
<button class="btnClick" data-backcolor="red">red</button>
<button class="btnClick" data-backcolor="green">green</button>
<button class="btnClick" data-backcolor="blue">blue</button>
<button class="btnClick" data-backcolor="orange">orange</button>
<button class="btnClick" data-backcolor="white">white</button>
</div>

JS

$(".btnClick").on("click",function(){
var mybackcolor = $(this).data("backcolor");
$("#linkbackclr").css('background-color', mybackcolor);
});

Answer 3

似乎问题在于这条线本身。

className = "colour" + Math.ceil(Math.random() * 5);

所以className将是颜色+一个randon数字;例如colour1，colour2 ..等等。所以你必须用这个名字来管理一个css类。

相反，你可以创建一个函数，它将以十六进制代码生成颜色并将被应用

   //This will return a random color
    var colorName = function createCol() {
      for (var col = "#", b = 0; 6 > b; b++) {
        col += "0123456789ABCDEF" [Math.floor(16 * Math.random())];
      }
      return col
    };

然后<div style='color:" + colorName+ "' >"

Answer 4

已编辑以使其有效...

尝试以这种方式更改notes.append：

将一个班级添加到li和li div
将按钮颜色类更改为id，并为每个

然后，为颜色链接添加一些点击事件：

$('.colorChoice').click(function(){
    var color = $(this).attr('id');
    //alert('color = '+color);

    var target = $(this).closest('li.someNote div.someNote-box');
    $(target).removeClass();
    $(target).addClass('someNote-box '+color);
});

要实现这一点，你必须拥有这样的CSS：

.red { background-color: red; }
.green { background-color: green; }
.blue { background-color: blue; }
.orange { background-color: orange; }
.purple { background-color: purple; }

Here's the working JSFiddle.您可以根据自己的需要随意编辑它。

希望它有所帮助。

如何使用jQuery更改特定元素的颜色？

4 个答案: