JavaScript更改元素的類

這是從我正在工作的網頁中嚴格修剪下來的源代碼。JavaScript更改元素的類

<!--// GRID ENTRY //--> 
    <li class="entry" id="sjDDulC8wt"> 
     <div class="entry_actions"> 
      <ul class="entry_actions"> 
       <li class='have_it'> 
<a href='javascript: haveItem("name", "id", "none")' target='_self' title='Have It' class='have_it'>%</a></li> 
      </ul> 
     </div> 
    </li>

裏面的haveItem()功能我想班上<a>元素的改變從「have_it」到「have_it選擇」更改元素的外觀。 id的原因是因爲我在頁面上有幾十個這樣的元素。目前我使用的JavaScript是：

var targetA = document.getElementbyID(sjDDulC8wt).getElementsbyTitle("Have_it"); 
targetA.removeClass("have_it").addClass("have_it selected");

當我點擊鏈接時，haveItem()功能運行，但它不會改變的類。如何更改我的腳本，以便單擊該鏈接將更改該類？

來源

2012-06-27 jaimerump

'getElementsbyTitle' ...是真的嗎？ – Pointy

JavaScript中沒有'removeClass'和'addClass'這樣的函數。 'getElementsByTitle'也不存在。我通常猶豫回覆「使用jQuery」，但**使用jQuery **。這是它真正擅長的事情。你的代碼會歸結爲'$（'＃sjDDulC8wt [title = Have_it]'）。addClass（'selected'）'。 – meagar

這裏有幾個問題：（1）將id放在getElementByID的引號中。（2）getElementsByTitle不存在。（3）即使它確實存在，你的第二行試圖對數組執行單個元素操作。（4）即使有效，函數addClass和removeClass也不存在。你可以通過使用jQuery來解決所有這些問題。 –

我假設您使用的是jQuery，因爲您使用removeClass()和addClass。否則，我會建議您鏈接到jQuery，以便下面的代碼可以正常工作，或僅使用JavaScript。

var targetA = $('#sjDDulC8wt .have_it'); 
targetA.addClass('selected');

以供將來參考，這裏是你的代碼中的一些東西，你可以改善：

getElementById()接受要檢索的字符串元素的ID。基本上，你應該包裝你的ID在'或"
要小心你的位置和下劃線。它們不是同一件事。您的列表項標題爲Have It，而您的JavaScript有Have_it。
大寫事宜。 Have_It與Have_it不一樣。當您嘗試按ID獲取元素時，請注意這一點。
其中有空格的類實際上是多個類。 have_it selected實際上同時具有have_it類和selected類。因此，沒有必要刪除have_it，然後添加have_it selected - 您可以直接添加selected類。
功能getElementbyTitle()目前在JavaScript中不存在。另外，請再次注意大小寫。通常，函數中每個單詞的首字母大寫。因此，如果它確實存在，它將被稱爲getElementByTitle()（請注意B而不是b）。

來源

2012-06-27 21:27:58 Zhihao

我不知道這些函數只是JQuery，我發現它們的鏈接沒有提到我看到的JQuery。我會繼續爲其他任何人絆倒這個標籤。謝謝！ – jaimerump

如果你不能使用jQuery那麼您可以更改使用className元素的類名：

var element = document.getElementById("elementId"); 
element.className = "have_it selected";

還要注意這個功能：getElementsByClassName（HTML5）。

正如已經指出的那樣，在選擇元素時還有其他一些問題。從你的榜樣，它看起來像你想使用：

var element = document.getElementById("sjDDulC8wt"); 
var children = element.getElementsByClassName("have_it"); 
children[0].className = "have_it selected";

注意，有沒有錯誤處理/ null檢查這裏。並且這處理了一個簡單的情況，只是假定它存在，只改變具有指定類的第一個孩子。

但是如果你可以使用它，更喜歡jQuery。從你使用addClass/removeClass看來，你已經期待jQuery。

來源

2012-06-27 21:30:33 pb2q

這應該爲你做的任務：

<a title="Have It" class="have_it" onclick="this.className+=' selected'">%</a>

然而，你應該瞭解DOM。您使用的方法都不存在（getElementbyID，getElementsbyTitle,removeClass和addClass）。

來源

2012-06-27 21:33:48 Bergi

這裏：

var anchor = document.querySelector('#sjDDulC8wt [title="Have It"]'); 
if (anchor) anchor.classList.add('selected');

現場演示：http://jsfiddle.net/UZfnh/

（不會工作在舊的瀏覽器。）

來源

2012-06-27 21:42:09

當你成功地找到元素，你可以做其中之一：

element.classList.add("selected");

它使用FF3.6，IE10，Chrome8，Opera 11.50，Safari 5.1及更高版本的新功能classList。一旦你確定你的客戶將擁有其中一種瀏覽器（不久的將來），它就是最好的方式。
element.className += " selected";

className doc。這有效，可能是最簡單的方法。不像classList那麼好，但適用於所有瀏覽器。

來源

2012-06-27 21:42:45

回答

相關問題