。將圖像src以文本形式添加到div

Question

所以我試圖將圖像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'); 
} 
}); 

Answer 1

的問題是，你靠的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的使用帶來了更多的靈活性。

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