使用jQuery在div周圍創建邊框

Question

我想添加一個border圍繞一個div使用.wrap()和.unwrap()這個時div被點擊，但問題是，出現在頁面周圍沒有的頂部邊框div 。為什么？

這是我的代碼：

 $("#add").click(function() { //"main" is a tag. $("main").append('<div class="cards"><div class="card new" style="width: 20rem;">\\ <div class="layer"></div>\\ <div class="card-block">\\ <h4 class="card-title"></h4>\\ <p class="card-text"></p>\\ </div>\\ <div class="card-block">\\ <div class="delete">Del</div>\\ <div class="edit" data-toggle="modal" data-target="#note">edit</div>\\ </div>\\ </div></div>'); var title = $("#noteTitle").val(); var text = $("#noteBody").val(); $(".new h4").html(title); $(".new p").html(text); var layer = $("#selected").css("background-color"); $(".new .layer").css({ "background-color": layer, "position": "absolute", "opacity": ".2", "top": "0", "left": "0", "width": "100%", "height": "100%" }); $(".card").removeClass("new"); }); $("main").on("click", ".card", function() { if ($(this).parent().is(".border")) { $(this).unwrap(); } else { $(this).wrap('<div class="border"></div>'); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <input type="text" id="noteTitle" /> <textarea id="noteBody" ></textarea> <button id="add">Click</button> <main></main> 

CSS：

.card {
margin: 10px;
height:230px;
background: url(paper.jpg);
background-repeat: no-repeat;
background-size: cover;
display: inline-block;
word-wrap: break-word;
font-family: "comic sans MS";
float: left;
padding-right: 60px;
z-index:-1;
}
.border {
border: solid 20px black;
}

Answer 1

您可能需要在想要邊框的div上切換CSS類，而不是添加帶有“ border”類的新div。 您正在做的是在頂部添加一個新的div，其中沒有內容，因此它不會被包圍。 而您要添加的CSS就像border: 1px solid black一樣border: 1px solid black

使用懸停CSS的超級快速示例...只需修改您的代碼即可在jQuery中單擊邊框時添加/刪除類

http://jsbin.com/fibogojulo/edit?html,css，輸出

Answer 2

有一種添加邊框的方法比用div包圍更容易。使用CSS屬性邊框，您可以輕松完成。

 $('#button').click(function() { $('#div').css('border', '1px solid black'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <button id="button">Press me</button> <div id="div">hello</div>