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类，而不是在类＆＃34; border＆＃34;中添加新的div。您正在做的是在顶部添加一个没有内容的新div，因此它不会包围。您要添加的CSS类似于border: 1px solid black

使用悬停css的超快速示例...只需修改代码，在jQuery中为边框块点击添加/删除类

http://jsbin.com/fibogojulo/edit?html,css,output

Answer 2

添加边框比使用div更简单的方法...使用CSS属性边框可以非常轻松地完成。

＆＃13;

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

＆＃13;

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

＆＃13;

使用jquery在div周围创建一个边框

2 个答案: