Question

我正在尝试使用包含变量的多个属性在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');
});

因此，data-font-text实际上做了所需，但data-font-color并不是。实际上PhpStorm表示数据字体颜色，被包含在＆＃34; ＆＃34;，实际上只是文字。是否可以覆盖此问题，以便div data-font-color正常显示？

此解决方案有效但不符合我的需求，我需要不同的数据属性：

$('<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');

为输入[name = color_to_add]

添加了HTML

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

Answer 1

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

 $('<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将data-font-color显示为文本，但它实际上是工作属性。

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

1 个答案: