Question

我有Markdown编辑器的局部视图我在主视图中引用此局部视图以及id属性。

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

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

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

这一切都很好，我的问题是我需要动态捕获和设置id来显示编辑器......这里是编辑器代码。这里我用#exectuivesummary对querySelector进行了硬编码。我想根据传递给Partial视图的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"));

希望它有所帮助。

如何动态设置Query Selector属性

1 个答案: