小编Sil*_*fer的帖子
Javascript文件在Ajax导航中显示为重复
我在AJAX导航时遇到问题，问题是加载的javascript文件即使在新内容加载后仍保留在浏览器中，即使它们DOM不再存在，它们也以VM文件形式显示在浏览器控制台中并在其中执行代码。我不希望发生这种情况，因为当新内容通过时应该替换的javascript文件AJAX。
我的DOM结构如下：
<body>
<header></header>
<main id="contentToBeReplaced">
<p>New content with its own js</p>
<script>
var script = "js/new.js";
$.getScript(script);
</script>
</main>
<footer></footer>
<script src="js/main.js"></script>
</body>
每当页面加载有其自己的javascript文件时，就会出现一个新VM文件并保留所有旧文件，这就是一个问题：
那么，问题出在哪里，我该如何解决呢？我需要防止重复文件，并在加载新的js文件时将其删除。
5
推荐指数
推荐指数
1
解决办法
解决办法
370
查看次数
查看次数
如何创建单击元素输入的对象？
单击颜色时,会创建一个对象.
$(document).off("click", ".color").on("click", ".color", function (event) {
var result = {};
$.each($('.color input').serializeArray(), function() {
result[this.name] = this.value;
});
console.log(result);
});.color{height:100px;width:200px}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="color" style="background-color:pink">
<input type="hidden" name="name" value="fred">
<input type="hidden" name="id" value="23">
</div>
<div class="color" style="background-color:blue">
<input type="hidden" name="name" value="laura">
<input type="hidden" name="id" value="14">
</div>但我希望实现点击颜色的对象被创建.
$(document).off("click", ".color").on("click", ".color", function (event) {
var result = {};
var this = $(this);
$.each($(this 'input').serializeArray(), function() {
result[this.name] = this.value;
});
console.log(result);
});.color{height:100px;width:200px}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="color" style="background-color:pink">
<input …4
推荐指数
推荐指数
1
解决办法
解决办法
45
查看次数
查看次数
Bootstrap 4下拉菜单出现在其他元素后面
我有问题bootstrap 4 dropdown menu，如果有足够的空间并且从下到上打开下拉菜单，则所有菜单看起来都很好，但是如果菜单从上到下打开，则某些菜单menu items确实出现在其他div后面。我该如何解决，为什么它仅在特定情况下发生？我尝试使用相对位置和z-index，但是它不起作用。
更新：@ZimSystem的回答很好，但是它不能解决我的问题，因此，我更新了代码以忠实地再现我面临的问题。
这是简化的代码：
$(document).ready(function() {
$('.container').hover(function() {
if (!$(this).find('.card').hasClass('flipped')) {
$(this).find('.card').toggleClass('flipped')
}
$(this).find('.card').addClass('hovered');
}, function() {
var val = $(this).find('.card');
$(this).find('.card').removeClass('hovered');
setTimeout(function() {
if (!val.hasClass('hovered')) {
val.removeClass('flipped')
}
}, 1000);
});
});.dropdown{
width: 100% !important;
margin-top: 30% !important;
}
.dropdown a{
width: 100% !important;
}
.dropdown-item{
color: black !important;
}
.dropdown-menu{
height: auto !important;
}
.container {
width: 150px !important;
height: 150px;
float: left;
position: relative;
margin: 3% 2.25% 0 …4
推荐指数
推荐指数
1
解决办法
解决办法
3311
查看次数
查看次数
内容可编辑正则表达式无法按预期工作
我正在尝试验证此content editable值，但是如果您应用多个空格，它将无法正常工作。这regex怎么了？
var regex = /^([A-zñÑáéíóú&;0-9 ]{0,100})$/;
$("button").on("click", function() {
if (regex.test($("#editable").text()) ) {
console.log("valid");
}
});button {
display: block;
margin-top: 10px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="editable" contenteditable="true" contenteditable="plaintext-only" max="100" class="font-italic">Editable</span>
<button>Check</button>4
推荐指数
推荐指数
1
解决办法
解决办法
109
查看次数
查看次数
如何使用 animate 标签为 svg path d 属性设置动画
我正在尝试按照css 技巧中的本教程为svg pathwithanimate标记设置动画。我可以用 css 关键帧动画路径，结果是这样的：
#mySvg path{
animation: scale-path 10s ease-in-out infinite;
}
@keyframes scale-path {
50% {
d: path('M1036,540L883,540L883,693Z');
}
}<svg id="mySvg" xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
x="0"
y="0"
width="100%"
height="100%"
viewBox="0 0 1920 1080"
preserveAspectRatio="none">
<path d="M1045,520L1173,558L1184,393Z"
fill="lightblue"
stroke="#eee9ea"
stroke-width="1.51" />
</svg>但问题是我无法使用animate标签实现相同效果的动画（它应该会有很多path带有不同动画的标签）。我不确定这是否是正确的语法：
<svg id="mySvg" xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
x="0"
y="0"
width="100%"
height="100%"
viewBox="0 0 1920 1080"
preserveAspectRatio="none">
<path d="M1045,520L1173,558L1184,393Z"
fill="lightblue"
stroke="#eee9ea"
stroke-width="1.51">
<animate
attributeName="d"
from="M1045, 520L1173, 558L1184, 393Z"
to="M1036; …3
推荐指数
推荐指数
2
解决办法
解决办法
3679
查看次数
查看次数
如何将 transform-origin 与 SVG 结合使用？
我试图SVG path从它的中心旋转一个，但它不起作用
a {
width: 40px;
height: 40px;
width: 40px;
font-size: 1.5rem;
padding: 1px;
overflow: hidden;
border: 1px solid black;
}
a:hover path {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
a path {
transition: all .5s ease-in-out;
transform-origin: center center;
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<a href="#" class="rounded-circle" data-toggle="tooltip" data-placement="left" title="Twitter" aria-label="Twitter">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveAspectRatio="xMidYMid meet" viewBox="-250 -150 1000 1000" height="40px" width="40px">
<path fill="#007bff" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 …3
推荐指数
推荐指数
1
解决办法
解决办法
700
查看次数
查看次数
如何使用js在下载的文本文件中添加换行符
我试图以文本格式下载div内容.
我能够以txt格式下载div内容,但所有内容都是同一行.
我需要在每个元素中添加换行符.
function download() {
var a = document.body.appendChild(
document.createElement("a")
);
a.download = "export.txt";
a.href = "data:text/html," + document.getElementById("show-data").innerHTML;
a.click();
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="show-data">
<p>one</p>
<p>two</p>
<p>Three</p>
</div>
<button onClick="download()">Download</button>2
推荐指数
推荐指数
1
解决办法
解决办法
2054
查看次数
查看次数
css3动画和jquery的视觉问题(悬停翻转卡)
读我: - >当我悬停翻转卡时遇到麻烦,如果你在div内部移动时移动光标连续触发它会产生令人讨厌的效果,所以这就是我需要的:
1)我想要悬停翻转卡,即使你在悬停时移动光标,也不要再触发动画.
2)我还需要在翻转卡中垂直放置中心p标签,margin-top正在工作且margin:auto无法正常工作,我将2个示例放在代码段中,检查下一个类:
.card .front p {
margin-top: 100px;
}
.card .back p {
margin: auto;
}
那为什么不工作margin:auto？我不会使用margin-top,需要中心的内容.以下是工作代码段:
更新的问题: 我还需要实现下一个:有一次你将翻转卡片悬停在动画必须完成,即使你将鼠标悬停在div上,然后再次翻转到原始位置,我尝试下一步但它不起作用:
$(".container").hover(function(){
$(this).find(".card").toggleClass('flipped')
}, function(){
setTimeout(function(){
$(this).find(".card").toggleClass('flipped')
}, 1000);
});
$(document).ready(function () {
$(".card").hover(function(){
$(this).toggleClass('flipped')
}, function(){
$(this).toggleClass('flipped')
});
}).container {
width: 200px;
height: 260px;
position: relative;
margin: 0 auto 40px;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
display: inline-block;
}
#main{
border: 1px solid black;
}
button{ …2
推荐指数
推荐指数
1
解决办法
解决办法
175
查看次数
查看次数
背景尺寸封面/中心不起作用
我尝试使用background-size: cover和将背景图像置于 div 中心background-size: contain，但它不起作用。我需要在 HTML 标签内显示背景图像并在 css 文件中使用背景大小，这是代码：
.container {
width: 200px;
height: 260px;
position: relative;
margin: 0 auto 40px;
margin-left: 20px;
display: inline-block;
}
.main{
border: 1px solid black;
background-color: #A6A6A6;
}
.card {
width: 100%;
height: 100%;
position: absolute;
border: 2px solid white;
}
.card div {
height: 100%;
width: 100%;
color: white;
text-align: center;
position: absolute;
}
.card .front {
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: …2
推荐指数
推荐指数
1
解决办法
解决办法
2万
查看次数
查看次数
如何等待元素存在于 JavaScript 中？
我正在使用一个proxy object检测对象值更改然后通过 AJAX 加载新内容的方法，我使用一个setInterval函数来等待 AJAX 请求中出现的元素存在，然后执行一段代码。我这样做是因为我的情况需要它。我做了一个简短的片段示例：
var handler = {
makeThings: 0,
otherStuff: 0
};
var globalHandler = new Proxy(handler, {
set: function(obj, prop, value) {
obj[prop] = value
if (prop == "makeThings") {
var clearTimeSearchProxy = setInterval(function() {
if ($("p").length) {
console.log("The element finally exist and we execute code");
clearTimeout(clearTimeSearchProxy);
}
}, 100);
}
return true;
}
});
$(document).ready(function() {
$("button").on("click", function() {
globalHandler.makeThings = 1;
//This element comes with ajax but I use a …2
推荐指数
推荐指数
2
解决办法
解决办法
1万
查看次数
查看次数
如何按时间戳对数组进行排序？
我正在尝试array按时间戳值对此进行排序。我想按升序对它们进行排序，如果其中任何一个具有不确定的属性，请将其放在最后。我目前遇到错误Cannot read property 'first_release_date' of undefined。怎么解决这个问题呢？
var array =
[
{
"id": 1969,
"cover": {
"id": 1960,
"url": "image.jpg"
},
"first_release_date": 1083542400,
"name": "Item 1"
},
{
"id": 113242,
"name": "Item 2"
},
{
"id": 25076,
"first_release_date": 1540512000,
"name": "Item 3"
},
{
"id": 1969,
"cover": {
"id": 1960,
"url": "image.jpg"
},
"name": "Item 4"
},
{
"id": 9245,
"first_release_date": 1292976000,
"name": "Item 5"
}
];
Object.keys(array).forEach((key) => {
console.log(`Before: ${array[key].name}`)
});
array.sort((a,b) => a.array.first_release_date > …1
推荐指数
推荐指数
1
解决办法
解决办法
785
查看次数
查看次数
Bootstrap 4 表格垂直对齐中间
我试图用类垂直居中这个表的内容，align-middle但它不起作用。我怎样才能让它工作？
tr, td, p, a {
border: 1px solid black;
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<table class="table table-borderless">
<tbody>
<tr>
<td class="align-middle">
<p class="font-weight-bold font-italic text-secondary">LoremIpsum:</p>
</td>
<td class="align-middle">
<a href="#">Lorem ipsum</a>,
<a href="#">dolor sit amet</a>,
<a href="#">consectetur adipiscing</a>,
<a href="#">elit ultricies</a>
</td>
</tr>
<tr>
<td class="align-middle">
<p class="font-weight-bold font-italic text-secondary">Magna morbi sociis:</p>
</td>
<td class="align-middle">
<a href="#">Link</a>,
<a href="#">Link</a>
</td>
</tr>
</tbody>
</table>0
推荐指数
推荐指数
1
解决办法
解决办法
8724
查看次数
查看次数
如何隐藏具有smoth效果的flexbox元素
我需要居中div并在每次点击时隐藏它们,问题是当我使用它hide()并且flexbox它在消失后产生粗鲁效果,但是如果你只是简单地将元素向左移动它就可以了,我怎么能实现这个呢？
我需要将第一个示例中完全相同的消失效果应用于第二个示例(使用flexbox).
这是一个例子:
$(".example1, .example2").click(function(){
$(this).hide("slow")
});.main{
border: 2px solid black;
height: 100%;
width: 100%;
}
.example1{
background-color: grey;
width: 50px;
height: 50px;
margin: 10px;
float: left;
}
.example2{
background-color: grey;
width: 50px;
height: 50px;
margin: 10px;
float: left;
text-align: center;
margin-left: 8px;
}
.second{
border: 2px solid black;
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
justify-content: center;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
With simple float left it hides slowly fine:
<div class="first">
<div …-4
推荐指数
推荐指数
1
解决办法
解决办法
505
查看次数
查看次数
标签 统计
jquery ×9
javascript ×8
css ×7
html ×6
css3 ×3
arrays ×2
bootstrap-4 ×2
ecmascript-6 ×2
svg ×2
ajax ×1
animation ×1
browser ×1
duplicates ×1
es6-promise ×1
object ×1
promise ×1
regex ×1
sorting ×1
svg-animate ×1
this ×1