Question

我正在尝试将2个简单的点击功能添加到2个图像中并使它们“活跃”＃34;单击时，但由于某种原因代码不起作用。

这是外部文件的链接：

<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>

这是html：

<div class="blog-header">
<h1>This heading should be center aligned and colored</h1>
<p>Italised date and Author entered here</p>

<div id="facebook-like-button">
    <a href="#"><img src="images/facebook_like_button_big.jpeg"></a>
</div>
<div id="facebook-share-button">
    <a href="#"><img src="images/facebook-share.png"></a>
</div>
</div>

这是js代码：

 $(document).ready(main);

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

我不确定为什么div在点击时没有变为活动状态，但我还想将该功能仅附加到图像上，而不是整个div。

帮助：D

感谢。

Answer 1

你可以这样做：

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

Answer 2

首先包括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>

第二个你创建一个类似的功能并使用main函数..你有一个主要功能也可能是错误的错误或者你的情况应该是什么

$(document).ready(like);

如果你想在div中选择一个图像，只需使用＆gt; a＆gt; img

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

Answer 3

据我所知，您的代码应该正常运行。您必须错误地调用ready函数。

工作示例 http://jsfiddle.net/2j0s1j8v/3/

所有这些事件都会反击：

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。

Answer 4

https://jsfiddle.net/2j0s1j8v/4/

喜欢按钮

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

分享按钮

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

如果我正确理解你想要的东西，这是一个有效的例子。

在点击时为图像添加活动类。

编辑：添加分享

将click功能添加到图像元素

4 个答案: