如何將jQuery轉換爲標準javascript？

-6

我需要知道如何用標準的JavaScript而不是jQuery來做到這一點。如何將jQuery轉換爲標準javascript？

$('form table img').click(function(){ 
    $('form table img').removeClass('selected') 
    $(this).addClass('selected'); 
});

我有一個不能被修改的html文件，它有以下幾點：

<form action="#"> 
    <table> 
     <tr> 
      <td><img src="img/sunny.png" alt="Sunny" title="Sunny"></td> 
      <td><img src="img/cloudy_snow.png" alt="Clouds with Snow" title="Cloudy with Snow"></td> 
      <td><img src="img/sunny_cloudy.png" alt="Sunny with Clouds" title="Sunny with Clouds"></td> 
      <td><img src="img/sunny_snow.png" alt="Sunny with Snow" title="Sunny with Snow"></td> 
      <td><img src="img/thunderstorm.png" alt="Thunderstorm" title="Thunderstorm"></td> 
     </tr> 
    </table> 
</form>

，我需要能夠得到單擊的圖像，並添加選擇到它的類。

來源

2014-10-07 tbgeorge

你意識到，你要求一個完整的插件？ – Teemu 2014-10-07 16:49:21

'*相似*'如何？你想要做什麼？你自己的嘗試失敗了？什麼地方出了錯？而且，嚴重的是，兩張選票？ – 2014-10-07 16:49:23

你有沒有嘗試過解決這個問題呢？你有你的嘗試代碼？這聽起來像一個工作請求（原樣） – rlemon 2014-10-07 16:49:49

您可以使用Element.classList的live demo

function addfunction(){ 
    link.forEach(function(e){ 
     e.classList.remove('selected'); 
    }); 

    this.classList.add('selected'); 
} 

var link = [].slice.call(document.querySelectorAll("form img")); 

link.forEach(function(e){ 
    e.addEventListener("click",addfunction,false); 
});

來源

2014-10-07 16:54:29

[document.querySelector]（https://developer.mozilla.org/en-US/docs/Web/API/document.querySelector）僅返回第一個匹配項。 – dave 2014-10-07 16:55:44

然後使用'document.querySelectorall' – 2014-10-07 16:56:16

@Tambo與QSA，你的回答是錯誤的。您需要迭代節點列表 – 2014-10-07 16:58:58

[].forEach.call(document.querySelectorAll(".tab-links a"), function(x) { 
    x.addEventListener("click", function() { 
     [].forEach.call(document.querySelectorAll(".tab-links a"), function(y) { 
      x.classList.remove("selected"); 
     }); 
     this.classList.add("selected"); 
    }, false); 
});

使用班級列表對象，你需要遍歷，附加的事件，並再次重複，以去除類的實例selected

來源

2014-10-07 17:00:04

如何將jQuery轉換爲標準javascript？

回答

相關問題