我的问题在这里有两个部分:我创建了一个 Instagram 克隆，并希望能够单击每个单独的图像并具有类似的功能。我目前的设置方式是点击图片，它只会改变 fa-heart 的颜色。类从灰色到红色。这工作正常，但我想针对每个 img/<div>个别地。我通过一个 JSON 文件提取我所有的图像，问题是当点击一张照片时所有的心都会改变。我如何才能使用此功能单独定位每个元素？
这是 jsbin:http://jsbin.com/tecaha/edit?output
代码如下:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<header>
<div class="top">
<ul>
<li><i class="fa fa-home fa-2x"></i>
</li>
<li id="logo">
<img src="http://i.imgur.com/SmdPZ6T.png" />
</li>
<li id="profile-photo">
<img src="https://scontent-sea1-1.cdninstagram.com/hphotos-xaf1/t51.2885-19/10731946_1517235648523785_1216221661_a.jpg" />
<p class="username">username</p>
</li>
</ul>
</div>
</header>
<div id="container">
<main>
<div id="feed-container">
<ul id="images">
</ul>
</div>
<ul class="comment-list">
</ul>
</main>
</div>
</body>
</html>
CSS
* {
margin: 0px;
padding: 0px;
}
body {
font-family: "proxima-nova", "Helvetica Neue", Arial, Helvetica, sans-serif;
}
ul {
list-style: none;
}
li {
list-style: none;
}
#container {
margin: 0 auto;
display: block;
}
header {
margin: 0 auto;
display: block;
background-color: #3E6D93;
height: 50px;
}
.top {
background: #467ea6;
background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0.01, #467ea6), to(#27608c));
background: -webkit-linear-gradient(#467ea6 1%, #27608c 100%);
background: -moz-linear-gradient(#467ea6 1%, #27608c 100%);
background: -o-linear-gradient(#467ea6 1%, #27608c 100%);
background: linear-gradient(#467ea6 1%, #27608c 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#467ea6', endColorstr='#27608c', GradientType=0);
width: 100%;
}
.top li {
display: inline-block;
margin: 0 auto;
}
#home-button, .fa-home {
float: left;
background-color: #305F87;
color: #ccc;
padding: 7px;
margin-left: 200px;
width: 35px;
}
.fa-home {
padding-left: 12px;
}
#logo img {
float: right;
width: 110px;
margin-left: 400px;
padding: 6px;
}
#profile-photo {
float: right;
margin-right: 200px;
padding: 10px;
border-left: 1px solid #305F87;
border-right: 1px solid #305F87;
width: auto;
}
#profile-photo img {
width: 30px;
height: 30px;
border-radius: 5px;
}
#profile-photo p {
color: #fff;
font-weight: bold;
font-size: 14px;
text-align: center;
float: right;
margin-left: 10px;
padding: 5px;
}
#feed-container {
background-color: #DFDFDF;
width: 650px;
height: auto;
margin: 0 auto;
display: block;
}
#images {
margin: 0 auto;
display: block;
padding-top: 50px;
padding-bottom: 30px;
}
#images img {
margin: 0 auto;
display: block;
width: 550px;
height: 550px;
}
.below-image {
margin: 0 auto;
display: block;
width: 550px;
height: 52px;
background-color: #fff;
border: 1px solid #ccc;
}
.like {
float: left;
}
.fa-heart {
color: #5a5a5a;
padding: 10px;
border-right: 1px solid #ccc;
}
.liked {
color: #ff0000;
}
.image-info {
float: left;
text-align: left;
width: 437px;
height: 52px;
border-right: 1px solid #ccc;
}
.image-info p {
color: #467ea6;
font-weight: bold;
padding-top: 15px;
padding-left: 20px;
float: left;
}
.more {
float: right;
color: #5a5a5a;
}
.more, .info {
display: inline-block;
font-size: 45px;
color: #5a5a5a;
padding: 0 5px;
background-color: transparent;
border: 0;
cursor: pointer;
outline: none;
}
#clear {
clear: both;
}
.comment-container {
width: 550px;
height: 200px;
margin-bottom: 50px;
}
#add-a-comment {
margin: 0 auto;
display: block;
background-color: #fff;
width: 550px;
height: auto;
margin-bottom: 50px;
}
#add-a-comment p {
margin: 0 auto;
display: block;
}
#add-a-comment input[type=text] {
width: 450px;
border: 1px solid #ccc;
color: #4f4f4f;
font-size: 16px;
border: 0;
bottom: 40px;
padding: 15px;
outline: none;
}
input, select, textarea{
color: #f00;
}
.inserted {
cursor: pointer;
}
/*#addNewComment {
font-size: 16px;
border: 0;
bottom: 40px;
padding: 15px;
outline: none;
width: 100px;
}*/
JavaScript/jQuery
// Variable of html strings
var bottom = '<div class="below-image">' +
'<div class="like">' +
'<i class="fa fa-heart fa-2x"></i>' +
'</div>' +
'<div class="image-info">' +
'<p>User Info</p>' +
'</div>' +
'<div class="more">' +
'<button class="info">···</button>' +
'</div>' +
'<div id="clear"></div>' +
'</div>' +
'<div id="add-a-comment">' +
'<div class="comment-container">' +
'<form class="comment" action="index.html" method="post">' +
'<input id="enter" type="text" name="newcomment" value="" placeholder="Add a comment...">' +
'</form>' +
'</div>' +
'</div>' +
'</li>';
// GET Request to grab the data from the JSON file
$(document).ready(function () {
var jsonURL = "https://codesmith-precourse.firebaseio.com/instagram/-JqL35o8u6t3dTQaFXSV.json";
$.getJSON(jsonURL, function (json) {
var imgList = "";
//var newImage = "http://yourbizrules.com/wp-content/uploads/2014/08/Staying-Motivated.jpg";
$.each(json, function (i) {
imgList += '<li><img class="inserted" src= " ' + json[i] + ' ">' + bottom;
});
$('#images').append(imgList);
});
});
// Like Photos
// $(document).ready(function() {
// $(".inserted").on('click', '.inserted', function() {
// $(".fa-heart").toggleClass(".liked");
// });
// });
$(document).ready(function() {
$('#images').dblclick(function() {
$('.fa-heart').addClass('liked');
});
});
最佳答案
我会将图像和下方图像 block 包装在类为“post”的 div 中。然后，您可以为每个喜欢的帖子的特定“帖子”div 应用一个类。例如:
<div class="post">
<img class="inserted.../>
<div class="below-image">...</div>
</div>
现在你可以通过设置响应双击图片
$(document).on('dblclick', 'img.inserted', function(){
var post_block = $(this).parents('.post').first();
post_block.addClass('post-liked');
});
这会将 post-liked 类添加到包含 block 。现在你的 css 可以通过显示正确的心脏来适本地响应。
.post-liked .fa-heart {
color: #f00;
}
从你的后台加载时，你只需要在你的 javascript 中添加类 post-liked 到需要有红心的特定帖子。
关于javascript - 如何从 GET 请求的 JSON 文件中专门针对单个图像并将函数应用于单个图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32915015/