使用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>