Javascript .将图像src作为文本附加到div

所以我试图在你点击它的时候把image src附加到一个div中…到目前为止我是这样写的，它似乎不起作用，没有错误报告，也不知道发生了什么。该图像是一张class.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');
}
});

$（“.card”）。单击（函数（）{
控制台日志（“单击”）；
if（$（this.css（'border'）==“4px实心灰色”）{
var cardname=$（this.attr（'src'）；
$（“.picks”）.append（cardname）；
如果（选择，问题在于您依赖于
css（“边框”）
的结果，而这不是您所期望的：例如，Chrome将检索边框样式为
“4px实心rgb（128，128，128）”

相反，将CSS类设置为选中的
，并检查卡是否具有该类：

$(".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');
    }
});

$（“.card”）。单击（函数（）{
if（$（this）.hasClass（'selected'））{
var cardname=$（this.attr（'src'）；
$（“.picks”）.append（cardname）；
如果（选择<15）{
pick++；
}否则{
助推器++；
pick=1；
}
}否则{
$（this.addClass（'selected'）；
}
});

演示：

一般来说，作为经验法则，避免使用
$.fn.css
方法进行样式设置，这不仅非常突出，而且容易出错。在大多数情况下，使用addClass/removeClass会带来更大的灵活性。
问题在于您依赖
css（“边框”）的结果
虽然它不是您所期望的：例如，Chrome将检索边框样式作为
“4px实心rgb（128，128，128）”

相反，将CSS类设置为选中的
，并检查卡是否具有该类：

$(".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');
    }
});

$（“.card”）。单击（函数（）{
if（$（this）.hasClass（'selected'））{
var cardname=$（this.attr（'src'）；
$（“.picks”）.append（cardname）；
如果（选择<15）{
pick++；
}否则{
助推器++；
pick=1；
}
}否则{
$（this.addClass（'selected'）；
}
});

演示：

一般来说，作为经验法则，避免使用
$.fn.css
方法进行样式设置，这不仅非常突出，而且容易出错。在大多数情况下，使用addClass/removeClass会带来更大的灵活性。
您应该使用

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");
    }
});

$（“.card”）。单击（函数（）{
控制台日志（“单击”）；
if（$（this）.hasClass（“单击”））{
var cardname=$（this.attr（'src'）；
$（“.picks”）.append（cardname）；
如果（选择<15）{
pick++；
}否则{
助推器++；
pick=1；
}
}否则{
$（this）.css（'border'，'4px实心灰色'）.addClass（'clicked'）；
}
});

工作
您应该使用

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");
    }
});

$（“.card”）。单击（函数（）{
控制台日志（“单击”）；
if（$（this）.hasClass（“单击”））{
var cardname=$（this.attr（'src'）；
$（“.picks”）.append（cardname）；
如果（选择<15）{
pick++；
}否则{
助推器++；
pick=1；
}
}否则{
$（this）.css（'border'，'4px实心灰色'）.addClass（'clicked'）；
}
});

工作
这些只是程序其他部分中使用的一些变量。基本上是pick=1，booster=1。你能发布JSFIDLE代码吗？或者你能发布HTML吗？这些只是程序其他部分中使用的一些变量。基本上pick=1，booster=1。你能发布JSFIDLE代码吗？或者你能发布HT吗ML？虽然这个anwser是正确的，但dfsq在您之前发布了正确的anwser，所以我将接受他的版本。感谢帮助尽管这个anwser是正确的，dfsq在您之前发布了正确的anwser，所以我将接受他的版本。感谢帮助