因此,当我点击它时,我试图将图像src附加到div ...到目前为止,我已经像这样写了它并且它似乎不起作用,没有错误报告,不知道发生了什么。图像是一个类.card(其中有15个),我只想在边框是灰色时附加到div,你点击一次选择卡(更改边框),然后再次点击将选定的卡粘贴到div上... div称为.picks。我只想在我的页面上将图像src显示为文本。谢谢你的帮助
$(".card").click(function() {
console.log("click");
if($(this).css('border')==="4px solid gray") {
var cardname = $(this).attr('src');
$(".picks").append(cardname);
if(pick<15) {
pick++;
}
else {
booster++;
pick=1;
}
}
else {
$(this).css('border', '4px solid gray');
}
});
答案 0 :(得分:3)
问题在于,您依赖于css("border")
的结果,而不是您所期望的结果:例如Chrome会检索边框样式为"4px solid rgb(128, 128, 128)"
。
而是设置CSS类selected
并检查该卡是否具有此类:
$(".card").click(function () {
if ($(this).hasClass('selected')) {
var cardname = $(this).attr('src');
$(".picks").append(cardname);
if (pick < 15) {
pick++;
} else {
booster++;
pick = 1;
}
} else {
$(this).addClass('selected');
}
});
演示: http://jsfiddle.net/1o7tgs5j/13/
一般来说,作为经验法则,避免使用$.fn.css
方法进行样式设置,不仅这是非常突兀的,而且也是容易出错的方法。在大多数情况下,使用addClass / removeClass会带来更大的灵活性。
答案 1 :(得分:1)
您应该使用
if($(this).css('border')==="4px solid rgb(128, 128, 128)")
{
....
}
但我会建议你这样做......
$(".card").click(function () {
console.log("click");
if ($(this).hasClass("clicked")) {
var cardname = $(this).attr('src');
$(".picks").append(cardname);
if (pick < 15) {
pick++;
} else {
booster++;
pick = 1;
}
} else {
$(this).css('border', '4px solid gray').addClass("clicked");
}
});
工作Fiddle