围绕一个div创建一个边界与jQuery

我想用.wrap()和.unwrap()单击此div时，添加border围绕div但问题是，出现在页面周围没有div。为什么顶部的边界？围绕一个div创建一个边界与jQuery

这里是我的代码：

$("#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; 
}

来源

2017-08-10 Sam Gal

的console.log（本）......在上（ '点击'，...）回调。它是主要元素还是卡类？ – Argee

你围绕一个'.border'。让我们看看'css'，有没有一个原因让你不只是在'jQuery'中添加'.css'？ –

它看起来像是包装和解开'

'标签 –

你可能会想切换你想要一个边界DIV CSS类不要添加类“边框”的新div。你正在做的是在顶部添加一个没有内容的新的div，所以它不包围。而你将要添加的CSS是使用类似border: 1px solid black

超级简单的例子悬停的CSS ...只是修改代码以jQuery中

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

添加/删除一个类上点击的边界片

来源

2017-08-10 13:59:17

有更简单的方法来添加边框比使用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>

来源

2017-08-10 16:00:13

围绕一个div创建一个边界与jQuery

回答

相关问题