如何使用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？

回答

相关问题