javascript - 如何动态设置查询选择器属性

Question

我有一个带有 Markdown 编辑器的部分 View ，我在主视图中引用此部分 View 以及 id 属性。

 @Html.Partial("_MarkdownEditor", new { id = "executivesummary" }) 
 @Html.Partial("_MarkdownEditor", new { id = "editorsection" })

这里尝试像这样动态设置 id 属性..

<div id="@ViewData.Eval("id")">
</div>

这一切都工作正常，我的问题是我需要动态捕获和设置 id 来显示编辑器...这是编辑器代码。在这里，我使用 #exectuivesummary 对 querySelector 进行了硬编码。我想根据传递给部分 View 的 id 参数动态设置它，这样我就可以拥有编辑器的不同实例!如何做到这一点？

<script type="text/javascript">
var editor = new tui.Editor({
    el: document.querySelector('#executivesummary'),
    previewStyle: 'vertical',   
    height: '300px',
    initialEditType: 'wysiwyg'
    //hideModeSwitch:true
});

function saveContent(e) {
    var content = editor.getValue();
    console.log(content)
    e.preventDefault();
}

Answer 1

您必须要在 querySelector 中使用变量。

你可以这样做:

var id = 'executivesummary';
var matched = document.querySelector('#' + id);
console.log(matched);

<div id="executivesummary"></div>

根据您的情况，您可以这样做:el: document.querySelector('#' + @ViewData.Eval("id"));

希望有帮助。