Javascript 向图像元素添加单击功能_Javascript_Jquery_Html

Javascript 向图像元素添加单击功能

javascript jquery html

Javascript 向图像元素添加单击功能,javascript,jquery,html,Javascript,Jquery,Html,我试图添加2个简单的点击功能，以2个图像，使他们活跃时，点击，但由于某种原因，代码是不工作的这是指向外部文件的链接： <head> <link href="bootstrap.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="jquery-1.11.0.min.js"></script> <script type="text/javasc

我试图添加2个简单的点击功能，以2个图像，使他们活跃时，点击，但由于某种原因，代码是不工作的

这是指向外部文件的链接：

<head>
<link href="bootstrap.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="jquery.leanModal.min.js"></script>
<script type="text/javascript" src="likeandshare.js"></script>

<link type="text/css" rel="stylesheet" href="blogformat.css" />

 <script type="text/javascript" src="likeandshare.js"></script>
 </head>

我不确定为什么单击时div没有激活，但我也希望只将函数附加到图像，而不是整个div

帮助：D

谢谢。

您只需执行以下操作：

$(document).ready(function(){
    $("#facebook-like-button").find('img').click(function() {
         $(this).toggleClass("active");
    });
});

首先包括jquery

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
 <script type="text/javascript" src="likeandshare.js"></script>
</head>

如果您想选择div中的图像，只需使用>a>img即可

var like = function() {
$("#facebook-like-button > a > img").click(function() {
$(this).toggleClass("active");
});
};

据我所知，你的代码应该是有效的。您一定是错误地调用了ready函数

工作示例

所有这些事件都会引起反响：

share = document.getElementById("facebook-share-button");
share.onclick = function(){ 
    console.log("ONCLICK"); 
}  
share.addEventListener("click", function(){ console.log("CLICK LISTENER"); } );

$("#facebook-share-button").click(function() {
    console.log("JQUERY CLICK");
});

检查控制台并查看消息。它们都能正常开火。f12镀铬

喜欢按钮

$("#facebook-like-button img").click(function () {
  $(this).toggleClass("active");
});

共享按钮

$("#facebook-share-button img").click(function () {
  $(this).toggleClass("active");
});

如果我正确理解您的需求，下面是一个工作示例

单击时将活动类添加到图像

编辑：还添加了共享

$document.readymain；中的主要内容是什么；？很好，下面的函数名为main，但在发布之前我将其更改为like。我已将其编辑为正常运行。由于某些原因，它仍然没有运行。我将用标题中的所有代码更新原始帖子，以查看是否有冲突。我应该补充一点，我的html中也有用于模型窗口的脚本代码，但不应该有冲突。@Jgz尝试给你的facebook按钮溢出：隐藏；在css中。。在做任何事情之前，请阅读控制台日志中的任何错误。将对此进行报告，但代码仍未运行。很奇怪。我有一个模型窗口，它在HTML本身中打开，但无法使用简单的单击功能：DThanks Lemony获得即时回复。我在这里使用了这个代码，它运行得很好。@Jgz您使用了哪一个？如果您使用jQuery，那么应该坚持使用jQuery。其他人只是为了确保jQuery的处理没有任何可疑之处。我使用了我的初始代码，但无论我做了什么，我都无法在单击时使活动的类actovate。我现在决定使用CSS并使用：hover，直到我可以调试我的jQuery

share = document.getElementById("facebook-share-button");
share.onclick = function(){ 
    console.log("ONCLICK"); 
}  
share.addEventListener("click", function(){ console.log("CLICK LISTENER"); } );

$("#facebook-share-button").click(function() {
    console.log("JQUERY CLICK");
});

$("#facebook-like-button img").click(function () {
  $(this).toggleClass("active");
});

$("#facebook-share-button img").click(function () {
  $(this).toggleClass("active");
});