Javascript：通過類名獲取元素不起作用

我正在開發富文本編輯器，並且一直做得很好。我製作了一個單獨的.js文件將其用作插件。Javascript：通過類名獲取元素不起作用

現在我想通過.cshtml文件給它一個類名來使用這個插件。但它似乎沒有工作，我搜索了相關的答案，他們說使用document.getElementsByClassName將解決我的問題。

請通過這段代碼告訴我哪裏出了問題？

文本編輯的.js -

var richTextEditor = document.getElementsByClassName("text-editor"); 
    richTextEditor.contentDocument.designMode = 'ON'; 
    $('#strong').live('click', function() { 
     richTextEditor.contentDocument.designMode = 'ON'; 
     richTextEditor.contentDocument.body.contentEditable = true; 

     richTextEditor.contentDocument.execCommand('bold', false, null); 
     richTextEditor.focus(); 
    });

CSHTML文件 -

<script src="/js/Texteditor.js" type="text/javascript"></script> 
<script src="/js/jquery.js" type="text/javascript"></script> 
<div id="strong" class="command btn"><i class="icon-bold icon-black"></i></div> 



    <iframe id="edtNoteCreate" class="text-editor" name="DisplayNote" style="width:430px;height:150px;">@((Model.Note != null ? Model.Note : ""))</iframe>

來源

2013-03-21 Manoj

[閱讀文檔。]（https://developer.mozilla.org/en-US/docs/DOM/document.getElementsByClassName）'getElementsByClassName'返回多個元素。 – 2013-03-21 04:02:07

只要採取的第一項的匹配的節點;它是一個NodeList，但可以像Array一樣被解引用。

var richTextEditor = document.getElementsByClassName("text-editor")[0];

來源

2013-03-21 04:12:43

getElementsByClassName方法返回一個數組所以使用這樣

var richTextEditor = document.getElementsByClassName("text-editor"); 
    richTextEditor[0].contentDocument.designMode = 'ON'; 
    $('#strong').live('click', function() { 
     richTextEditor[0].contentDocument.designMode = 'ON'; 
     richTextEditor[0].contentDocument.body.contentEditable = true; 

     richTextEditor[0].contentDocument.execCommand('bold', false, null); 
     richTextEditor[0].focus(); 
    });

來源

2013-03-21 04:05:21

爲什麼重複'[0]'？當聲明var時給'[0]'。 :) – 2013-03-21 04:11:40

@prasath k，爲什麼它返回一個數組？ – Manoj 2013-03-21 04:12:28

document.getElementsByClassName ..正如你所看到的，它通過類名得到ELEMENTS而不是Element。如果你有5個具有相同類名的元素，那麼它返回索引爲0,1,2,3,4，...的所有五個元素。如果你想獲得一個元素，你應該去getElementById（） – 2013-03-21 04:15:09

爲什麼不使用jquery方法？

var richTextEditor = document.getElementsByClassName("text-editor"); 

instead try this: 

var richTextEditor = $(".text-editor"); //again this is going to return more than one object. 

//so you can also try below code to manipulate in that. 

var richTextEditor = $(".text-editor").first(); //for first element. similarly can use .last() or n-th child.

來源

2013-03-21 04:13:10 Sangeeta

你的建議是有意義的，但是我爲這個編輯器使用了更多的'execCommands'，所以給它的孩子不會幫助我。 – Manoj 2013-03-21 04:15:21

正如你使用jQuery，爲什麼不堅持使用jQuery。

var richTextEditor = $('.text-editor').eq(0);

並且還的jQuery live方法已過時，使用.on()代替。

來源

2013-03-21 04:30:11

$（「。text-editor」）返回HTMl對象。「document.getElementsByClassName（」text-editor「）」返回數組對象。

來源

2013-03-21 05:47:06 zhicheng

Javascript：通過類名獲取元素不起作用

回答

相關問題