如何使用jQuery $（this）更改使用「onclick」事件的元素的HTML？

我是jQuery的新手，我有點卡住使用$（this）。下面是一個簡單的例子代碼：

<!DOCTYPE html> 

<html> 
    <head> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

     <script> 
      function change() 
      { 
       $(this).html("STOP"); 
      } 
     </script> 
    </head> 


    <body> 
     <h2 onclick="change()">GO</h2> 
    </body> 
</html>

在這裏，如果我點擊文本「GO」，那麼我期待它來改變自己，以「STOP」。但它不起作用。我錯過了什麼？

來源

2014-10-08 CluelessNoob

試圖通過this到您的函數，它指的是h2元素：

<h2 onclick="change(this)">GO</h2>

，那麼你可以在參數傳遞給你的函數：

function change(el) { 
    $(el).html("STOP"); 
}

或更好，你可以使用.click()事件處理者：

$('h2').click(function() { 
    $(this).html("STOP"); 
});

來源

2014-10-08 06:35:56 Resolution

非常感謝（也到其他人誰回答）！是的，我也喜歡'click（）'解決方案。但有時我需要使用PHP生成HTML元素並傳遞一些獨特的參數，這就是爲什麼我需要使用內聯JS。雖然知道這兩種解決方案很方便：D – CluelessNoob 2014-10-08 06:49:56

最好的辦法：

<h2>GO</h2>

與

$('h2').click(function() { 
    $(this).html("STOP"); 
});

或者，如果你仍然想使用嵌入式處理器（你可能沒有做，如果你使用jQuery）：

<h2 onclick="change(this)">GO</h2>

和

function change(obj) { 
    $(obj).html("STOP"); 
}

第一APP首選roach是因爲它可以減少對HTML的依賴。如果您更改HTML結構，則不必隨身攜帶這些內聯處理程序。對於這件事，甚至更有效的方法是使用CSS選擇器來定位這個元素：

<h2 class="btn-go">GO</h2>

然後

$('.btn-go').click(function() { 
    $(this).html("STOP"); 
});

現在JavaScript代碼甚至不關心你是否使用H2或按鈕標籤，它只需提供課程btn-go。

來源

2014-10-08 06:36:19 dfsq

用途：

<script> 
    $('h2').click(function(){ 
     $(this).html('STOP') 
    } 
</script>

，並移除任何HTML的onclick。

<h2>GO</h2>

作爲一般規則，你不應該內嵌Javascript代碼添加到您的HTML，保持顯示和功能分開。

來源

2014-10-08 06:36:22 xShirase

正如你已經標記jquery我建議你嘗試下面的代碼使用動態。作爲其相當現代的方法及其在小提琴的工作： -

$(document).ready(function(){ 
    $("h2").on('click', function() { 
    $(this).html("STOP"); 

}); 

});

，併爲您的情況下可以嘗試： -

function change(e) 
      { 
       $(e).html("STOP"); 
      }

和HTML： -

<h2 onclick="change(this)">GO</h2>

演示： -

http://jsfiddle.net/DXQ5j/33/

來源

2014-10-08 06:36:58 Neel

這裏的jsfiddle此 - http://jsfiddle.net/Arindamnayak/r53t3f6d/

$("h2").click(function() { 
       $(this).html("STOP"); 
      }); 

    <h2 >GO</h2>

來源

2014-10-08 06:37:39

爲什麼onclick？ – xShirase 2014-10-08 06:37:58

更新，它不是必需的，我錯過了文本，而複製。 – 2014-10-08 06:39:33

如何使用on？這是動態的，比click更好。

$(selector).on("click",function() { 
    //Your Code to Execute 
});

文檔：http://api.jquery.com/on/

來源

2014-10-08 06:39:02 tika

是的，我也喜歡那種方式。它也適用於嵌入式元素。這很酷。 'click'是老式的。豎起大拇指！ – 2014-10-08 06:40:52

這不是動態的。這與'click'相同。 – 2014-10-08 06:43:59

你可以使用jQuery：

HTML：

<h2>GO</h2>

腳本：

$(document).ready(function() { 
    $('h2').click(function() {     
     $(this).html("STOP"); 
    }); 
});

jsfiddle demo

，或者您可以使用JavaScript：

<h2 onclick="changeme(this)">GO</h2> 
<script> 
    function changeme(element) { 
    $(element).html("STOP"); 
} 
</script>

jsfiddle demo

來源

2014-10-08 06:39:37 Farshad

-2

的onclick =「平變化（這一點）

function change(obj) 
      { 
       $(obj).html("STOP"); 
      }

來源

2014-10-08 06:41:53

這個答案除現有答案中的信息之外還有什麼其他內容？ – 2014-10-08 06:45:53

如何使用jQuery $（this）更改使用「onclick」事件的元素的HTML？

回答

相關問題