Javascript的新手,如果这是一个愚蠢的问题,请道歉!
我很难解释这个,但我有这样简单的竖起/缩小系统:
//thumbs up down reviews
$(function addThumbs() {
$(".vote-up").click(function() {
var review_id = $('#review_id').val();
var user_id = $('#user_id').val();
if (user_id == '') {
alert('no user id');
} else {
$("#flash").show();
$("#flash").fadeIn(400).html('<img src="ajax-loader.gif" />Loading Comment...');
$.ajax({
type: "POST",
url: "ajax-thumbsup.php",
data: {
"user_id": user_id,
"review_id": review_id //we are passing the name value in URL
},
cache: false,
success: function(html) {
$('#vote-up').attr('src', 'img/upgreen.png');
}
});
}
return false;
});
});
$(function addThumbsDown() {
$(".vote-down").click(function() {
var review_id = $('#review_id').val();
var user_id = $('#user_id').val();
if (user_id == '') {
alert('nouserid');
} else {
$("#flash").show();
$("#flash").fadeIn(400).html('<img src="ajax-loader.gif" />Loading Comment...');
$.ajax({
type: "POST",
url: "ajax-thumbsdown.php",
data: {
"user_id": user_id,
"review_id": review_id //we are passing the name value in URL
},
cache: false,
success: function(html) {
$('#vote-down').attr('src', 'img/downred.png');
}
});
}
return false;
});
});
我的HTML看起来像这样:
<div class="row">
<div class="thumbs">
<input type="hidden" id="review_id" value="11" />
<input type="hidden" id="user_id" value="5" />
<div id="pluses">0</div> <div id="progressdiv"></div>
<a><img id="vote-up" class="vote-up" src="img/up.png" alt="thumbs up" /> </a>
<a><img id="vote-down" class="vote-down" src="img/down.png" alt="thumbs down" /> </a>
<div id="minuses">0</div>
</div>
comments/likes
</div>
<div class="row">
<div class="thumbs">
<input type="hidden" id="review_id" value="12" />
<input type="hidden" id="user_id" value="5" />
<div id="pluses">0</div> <div id="progressdiv"></div>
<a><img id="vote-up" class="vote-up" src="img/up.png" alt="thumbs up" /> </a>
<a><img id="vote-down" class="vote-down" src="img/down.png" alt="thumbs down" /> </a>
<div id="minuses">0</div>
</div>
comments/likes
</div>
如果我点击第二个拇指,第一个变为绿色,我如何告诉javascript哪个img#vote-down需要更改?
答案 0 :(得分:1)
页面上的ID必须是唯一的,你需要做出共同点。你应该做的是使用一个公共类来引用元素。 this
范围将为您提供单击的元素,您可以遍历树以查找您所追求的元素。
将id切换到类并组合逻辑,这样你只有一个函数。
$(".thumbs").on("click", "img", function (e) {
var img = $(this),
isUpVote = img.hasClass("vote-up"),
thumbsElem = img.closest(".thumbs"),
review_id = thumbsElem.find(".review_id").val(),
user_id = thumbsElem.find(".user_id").val(),
active = isUpVote ? "up" : "down",
inactive = isUpVote ? "down" : "up";
e.preventDefault();
if (user_id == '') {
alert('nouserid');
} else {
$("#flash").fadeIn(400).html('<img src="ajax-loader.gif" />Loading Comment...');
$.ajax({
type: "POST",
url: "ajax-thumbs" + active + ".php", //You really should just have one php, pass up up or down!
data: {
"user_id": user_id,
"review_id": review_id //we are passing the name value in URL
},
success: function (html) {
thumbsElem.find(".vote-" + active).prop('src', 'img/' + active + 'red.png');
thumbsElem.find(".vote-" + inactive).prop('src', 'img/' + active + '.png');
},
error: function () {
alert("Your vote was not counted because of an error, try again");
},
complete: function () {
$("#flash").stop().hide();
}
});
}
});
组合逻辑并添加一个简单的检查意味着您不必维护两组基本上做同样事情的代码。