通过javascript侦听器发送id

Question

对于我所有的其他选项，这工作得很好(我只是编辑替换部分是正确的id)..

(注意:所有的"'s都是'd '的，因为在生产中它们是由js动态创建的)

<div class="singlecontrol"><span style="vertical-align: middle;">Colour Picker</span><input oninput="updatetxtcolour(event)" id="colourpicker"+textcount+"" value="#dfe481" type="color" autocomplete="off" ></div>

<script> 
function updatetxtcolour(e) {
var ideditaded = e.target.getAttribute("id").replace("colourpicker", "");
document.getElementById("quotetext"+(ideditaded)).style.color = document.getElementById("colourpicker"+(ideditaded)).value;
}
</script> 

但是对于我的字体选择器，它是这样工作的…

<div class="singlecontrol"><span style="vertical-align: middle;">Font Picker</span><input id="font"+textcount+"" type="text" autocomplete="off" ></div>


<script> 
$('#font'+(textcount))
.fontselect()
.on('change', function() {
applyFont(this.value);
});

} 


function applyFont(font) {
console.log('You selected font: ' + font);

// Replace + signs with spaces for css
font = font.replace(/+/g, ' ');

// Split font into family and weight
font = font.split(':');

var fontFamily = font[0];
var fontWeight = font[1] || 400;

// Set selected font on paragraphs
$('quotetext'+(textcount)).css({fontFamily:"'"+fontFamily+"'", fontWeight:fontWeight});

}
</script>

我遇到了麻烦，让后者的字体选择器以相同的方式发挥作用，即传递正确的ID，因为这些是动态创建的，如https://stackoverflow.com/a/69397361/4772471

我所有的其他选项调用一个函数oninput，但这个使用一个监听器，然后运行一个函数，所以我被难住了。

Answer 1

使用(必须使用'#'符号):

$('#quotetext'+(textcount)).css({fontFamily:"'"+fontFamily+"'", fontWeight:fontWeight});

代替:

$('quotetext'+(textcount)).css({fontFamily:"'"+fontFamily+"'", fontWeight:fontWeight});

另外，你可以使用模板字符串(了解更多:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)，会更有可读性:

$(`#quotetext${textcount}`)