.append image src 作为文本到 div

Question

所以当你点击它时我试图将图像 src 附加到 div...到目前为止我是这样写的但它似乎不起作用，没有错误报告，不知道发生了什么。该图像是一张 class .card（其中有 15 张），我只想在边框为灰色时附加到 div，您单击一次以 select 卡片（更改边框），然后再次单击以将 selected 卡片粘贴到 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');
}
});

Answer 1

问题是您依赖 css("border") 的结果，但它不是您所期望的：例如Chrome 将检索边框样式为 "4px solid rgb(128, 128, 128)"。

改为设置 CSS class selected 并检查卡是否具有此 class 或不：

$(".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 会带来更大的灵活性。

Answer 2

你应该使用

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

.append image src 作为文本到 div

.append image src as text to a div

javascript

jquery

image

src