使用包含变量的多模块html属性在jquery中创建div

我试图在jquery中创建一个div，其中包含多个属性，其中包含变量。这就是我到目前为止所做的：

var font_text = $('input[name=text_to_add]').val();
var font_color = $('input[name=color_to_add]').val();
$('input[name=add_text]').on('click', function() {
    $('<div class="one_text" data-font-text="'+ font_text + '"  data-font-color= "' + font_color +'" style="left: 75px; top: 50px;"><img src="/files/tmp/' + data.file + '.png"><div class="edit"></div><div class="del"></div></div>').appendTo('#text_content');
});

所以，数据字体文本实际上做了需要做的事情，但数据字体颜色没有。事实上，PhpStorm表示数据字体颜色，包含在其中，实际上只是文本。是否可以覆盖此问题，使div数据字体颜色显示正常

此解决方案可行，但不适合我的需要，我需要不同的数据属性：

$('<div class="one_text" data-font-text="'+ font_text + font_color + '"  style="left: 75px; top: 50px;"><img src="/files/tmp/' + data.file + '.png"><div class="edit"></div><div class="del"></div></div>').appendTo('#text_content');

添加了用于输入的HTML[name=color\u to\u add]

<div class="color-box"></div>
<input type="hidden" name="color_to_add" value="#FFFFFF">

---

在尝试不同的组合后，我发现此代码实际上是正确的：

 $('<div class="one_text" data-font-text="'+ font_text + '"  data-font-color= "' + font_color +'" style="left: 75px; top: 50px;"><img src="/files/tmp/' + data.file + '.png"><div class="edit"></div><div class="del"></div></div>').appendTo('#text_content');

---

尽管PhpStorm将数据字体颜色显示为文本，但它实际上是工作属性。

请向我们显示用于输入的html[name=color\u to\u add]数据字体颜色如何工作？试着用控制台记录字体颜色，看看这个值是否真的是你想要的。@Murali它只是一个给出十六进制的文本值。例如FFFFFF。@KingKing当实际附加div时，只有“数据字体文本”显示为属性“数据字体颜色”不适用。@Murali添加了HTML代码。哇。祝贺