小编jsP*_*yer的帖子
鼠标悬停在多个标记leaflet.js上？
所以我有一张传单地图,上面放着很多标记.我希望在标记上的"悬停"上有一个像资产等状态的弹出窗口.我在谷歌上看到了一些例子并尝试实现,但没有一个是触发任何事件.这是我尝试的代码.我怎样才能实现这个功能？我是否必须使用某种工具提示而不是弹出窗口？
buildMarkerLayer = (rawAssetsObjects) => {
let markersGroup = null;
var self = this;
markersGroup = L.markerClusterGroup({
spiderfyOnMaxZoom: true,
showCoverageOnHover: true,
zoomToBoundsOnClick: true,
spiderfyDistanceMultiplier: 2
});
self.$localForage.getItem('showAllAreas').then((_showAll) => {
if(_showAll){
this.loadAllAreas();
}else{
this.hideAllAreas();
}
});
angular.forEach(rawAssetsObjects, function(_asset) {
if(_asset.latitude && _asset.longitude){
markersGroup.addLayer(L.marker(L.latLng(_asset.latitude,
_asset.longitude), {
id: _asset.id,
icon: L.divIcon({
html: self.siMarkers.createHTMLMarker(_asset)
})
}).on('click', function(e) {
//dismiss the event timeline
self.$mdSidenav('right').close();
self.centerOnClick(_asset);
//set the selected asset to a shared service for availability in
//other controllers
self.siMapRam.setActive(_asset);
//inform detail controller of a newly …11
推荐指数
推荐指数
1
解决办法
解决办法
586
查看次数
查看次数
导航栏上的Bootstrap 4粘性顶层类不起作用
也许我有一些其他的类弄不懂引导程序的粘性类。我认为这就像将类添加到导航栏一样简单。我确实有2个导航栏，由于某些内部原因，不允许使用固定顶部。我一直希望我向下滚动时所拥有的第二个导航栏在顶部保持粘性。我究竟做错了什么？这是我的代码
/* .text-spLeft {
margin-left: 5px;
}
.text-spRight {
margin-right: 5px;
}
.header-secondnav .fixed-top {
margin-top: 70px !important;
}
.header-firstnav .top-nav-ul, .header-secondnav .top-nav-ul {
border-bottom: 5px;
border-bottom-color: grey;
border-bottom-style: solid;
border-bottom-width: thin;
}
.header-firstnav .top-nav-ul li, .header-secondnav .top-nav-ul li {
margin-bottom: 15px;
}
.header-firstnav .dropdown-toggle-ellipsis::after, .header-secondnav .dropdown-toggle-ellipsis::after {
display: none;
}
.header-firstnav .form-control:focus, .header-secondnav .form-control:focus {
outline: 0 !important;
}
.header-firstnav .nav-link, .header-secondnav .nav-link {
color: black;
font-weight: bold;
}
.header-firstnav .fa-chevron-down, .header-secondnav .fa-chevron-down {
color: #eb1b1e;
font-weight: bold;
} …8
推荐指数
推荐指数
2
解决办法
解决办法
6310
查看次数
查看次数
如何从数组中删除每个第N个元素
我将如何从第三个元素中删除下面数组中的每个第三个元素,以便最终结果看起来像这样,而不创建新数组？
这首歌永远不会结束,是的,它继续在我的朋友身上.有些人开始唱歌,不知道它是什么,他们会继续唱歌,因为
理论上,我正在考虑使用pop而不是slice(),因为slice会创建一个新数组.我该如何解决这个问题？
var thisArray = [ 'T','h','a','i','s','b',' ','i','c','s',' ','a','t','h','e','e',' ','t','s','o','r','n','g','t',' ','t','n','h','a','s','t',' ','o','n','e','o','v','e','a','r',' ','f','e','n','a','d','s','p',',',' ','p','y','e','i','s',' ','p','i','t','o',' ','g',' ','o','e','i','s',' ','t','o','n','e',' ','a',' ','n','d',' ',' ','o','i','n',' ','a','m','y',' ',' ','f','a','r','i',' ','e','n','o','d','s','i',' ','S',' ','o','m','a','e',' ','a','p','e',' ','o','p','a','l','e','r',' ','s',' ','t','a','a','r','t',' ','e','d','u',' ','s',' ','i','n','g','g','i',' ','n','g','o',' ','i','t','t',',',' ',' ','n','i','o','t','h',' ','k','a','n','o',' ','w','i',' ','n','g','o',' ','w','r','h','a','i','t',' ','s','i','t','h',' ','w','r','a','s','h',' ','A',' ','n','d','a',' ','t','o','h','e',' ','y',' ','a','w','i','p','l','l','o',' ','c','r','o','n',' ','t','i','p','n','u','i','e',' ','t','s','i',' ','n','g',' ','i','n',' ','g',' ','s','i','t','h',' ','f','r','o','r',' ','e','v','t','e','r','t',' ','j','u','u','s','t','t',' ','a','b','e','l','c','a',' ','u','s','l','e'];
for(var i=2; i<thisArray.length; i++){
thisArray.pop()
document.write (thisArray);
}5
推荐指数
推荐指数
1
解决办法
解决办法
4599
查看次数
查看次数
移动问题,修改Bootstrap类或错误的媒体查询
正如你所看到的,我的媒体查询变得一团糟.我正在用子弹创建这个时间轴,并且自己写了太多的媒体查询,试图让子弹与时间轴保持一致
我非常相信我在某个地方犯了一个错误.无论是在非媒体查询的css部分,也许在绝对区域的位置.我只是无法指出对齐.我的要求不是任何特定的屏幕尺寸,所以,我必须让所有这些都做得最好,我正在通过使浏览器宽度越来越小来进行测试.有没有自助解决方案？我是以错误的方式编写媒体查询吗？
html {
font-size: 18px;
}
@media (min-width: 576px) {
.container {
max-width: 540px;
}
}
@media (min-width: 768px) {
.container {
max-width: 720px;
}
}
@media (min-width: 992px) {
.container {
max-width: 960px;
}
}
@media (min-width: 1200px) {
.container {
max-width: 1400px;
}
}
h1, .h1 {
font-size: 3.815rem;
}
h2, .h2 {
font-size: 2.441rem;
}
h3, .h3 {
font-size: 1.563rem;
}
h4, .h4 {
font-size: 1.25rem;
}
.project-methodology-wrap {
padding: 5rem 0;
/*========== Media queries ==========*/ …5
推荐指数
推荐指数
1
解决办法
解决办法
149
查看次数
查看次数
背景颜色在一个位置不稳定
我正在自定义Slick Slider的外观。
我在其上创建的灰色背景.media-slider具有一定的高度，并且放置了箭头以使其与灰色背景的顶部对齐：
这是灰色背景：
.media-slider-wrap .media-slider {
position: relative;
overflow: hidden;
padding-bottom: 4rem;
}
.media-slider-wrap .media-slider:before {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #eff3f5;
display: block;
height: 55.1%;
z-index: -1;
}
我将箭头定位如下：
.media-slider-wrap .media-slider {
position: relative;
overflow: hidden;
padding-bottom: 4rem;
}
.media-slider-wrap .media-slider:before {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #eff3f5;
display: block;
height: 55.1%;
z-index: -1;
}
这是我在灰色背景的顶部与箭头的顶部对齐的位置进行的对齐：
但是，当我向p标签添加更多文本或将h1更改为较小尺寸的h标签时，就会发生这种情况。随着越来越多的内容添加到文本中，灰色背景正在下降。
如何解决将箭头顶部和灰色背景围绕图像中心对齐的问题？我怀疑我必须更改创建灰色背景的方式。
同样在非常小的屏幕上（iphone 5屏幕尺寸），我正在像这样将另一张幻灯片推到当前幻灯片，不确定是否是由相同的问题引起的
这是我的完整代码：
.media-slider-wrap .media-slider-text-slider .slick-prev, …5
推荐指数
推荐指数
1
解决办法
解决办法
102
查看次数
查看次数
Node js 如何每 2 秒运行一次 axios.get？
我有点像 node js 的新手，这就是我想要做的：我正在通过 map 函数（大约 3000 个链接）循环浏览一个充满我们网站链接的 json 文件，在循环内我正在做一个 axios获取每个链接并获取响应状态代码（将来会做其他事情）。但我只想每 2 秒或 5 秒运行一次 axios get，否则我会让网络服务器不堪重负。我正在尝试输入 async await 但它仍然太快并且服务器受到了打击（我在技术上正在 DDos-ing 我自己的网站）。我在 axios 周围放置了一个 SetTimeout 但这似乎不起作用，因为在控制台中结果打印得太快了。所以问题是，我如何让每个 axios.get 请求在地图循环中运行之前每 2 秒等待一次？
var axios = require('axios');
const fs = require('fs');
var statusCheck = 0;
var main = [];
let rawdata = fs.readFileSync('C:/Users/jay/Documents/crawl/filtered2.json');
let jsonParsed = JSON.parse(rawdata);
jsonParsed.map(async(line) => {
var encodeLink = encodeURI(line.link);
const response = await axios.get(encodeLink).catch((err) => {
var Status_ErrorsCatchaxios = {
"status Code": err.response.status ? err.response.status : "No …5
推荐指数
推荐指数
1
解决办法
解决办法
5503
查看次数
查看次数
React .map()不是函数错误
import React, {Component} from 'react';
import './App.css';
import axios from 'axios';
export default class App extends Component {
constructor() {
super();
this.state = {
weather: []
};
}
componentDidMount (){
this.search();
}
search = () => {
axios.get("http://api.openweathermap.org/data/2.5/weather?q=Houston&APPID=f2327cca8f3d665f4c9f73b615b294ed")
.then(res => {
this.setState({weather: res.data});
}).catch(error => {
console.log('Error from fetching data', error);
})
}
render() {
console.log(this.state.weather);
const weathermap = this.state.weather.map( (maps) =>{
{maps.wind.speed}
});
return (
<div className="container">
<div className="row">
<div className="col-md-4 col-md-offset-4">
<div className="weather">
<div className="current">
<div className="info">
<div> </div> …4
推荐指数
推荐指数
2
解决办法
解决办法
6573
查看次数
查看次数
jsPDF 自动表格标题文本不起作用以及如何将 html 呈现到标题
标题示例
使用许多在线示例，我试图将标题文本打印到表格顶部。我不能做的一件事是更新 jsPDF 和自动表格版本。这是由于代码最终会发生的一些内部冲突。问题 1 是为什么标题没有呈现到顶部。第二个问题是如何将 html 呈现到标题的顶部，而不仅仅是文本。目前 doc.text 只接受字符串作为参数。
我想渲染类似：“主标题小标题”到头部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.60/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/2.0.15/jspdf.plugin.autotable.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/2.0.15/jspdf.plugin.autotable.src.js"></script>
</head>
<body>
<button onclick="generatePdf()">Generate pdf</button>
<script>
function generatePdf(){
var columns = [{
title: "ID",
dataKey: "id"
},
{
title: "Name",
dataKey: "name"
},
{
title: "Country",
dataKey: "country"
},
];
var rows = [{
"id": 1,
"name": "Shaw",
"country": "Tanzania"
},
{
"id": 2, …1
推荐指数
推荐指数
1
解决办法
解决办法
1万
查看次数
查看次数
Bootstrap 4 浅色叠加在图像顶部，使文本突出/看得更清楚
所以我试图在 img 或图像的父 div 上放置一个非常浅的颜色，这样无论图像是浅色还是深色，文本都可以清晰可见，没有任何问题。正如您所看到的，我正在使用引导卡类来将文本置于图像之上。到目前为止，这是我的尝试，但具有这种不透明度会使文本和图像变暗，我希望图像变暗/变亮，以便文本清晰可见。这里有什么好的解决方案。我看到人们使用透明背景色作为图像并将其覆盖在 css 上，我不知道这是否是一个好方法
.dnow-regionsContent {
background-color: SlateGray;
position: relative;
width: 100%;
height: 100%;
opacity: 0.8;
}
.dnow-regionsContent .card-img-overlay img {
max-height: 40rem;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>slick slider</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section class="dnow-regionsWrap">
<div class="dnow-regionsContent">
<div class="card bg-dark text-white">
<img src="https://www.dropbox.com/s/9fvw247x7ml90mf/canadaN.jpg?dl=1" alt="">
<div class="card-img-overlay d-flex align-items-center container">
<div class="row mb-5">
<div class=" col-sm-12 text-content">
<h2 class="card-title ">
Canada …1
推荐指数
推荐指数
1
解决办法
解决办法
9312
查看次数
查看次数
Bootstrap 4 IE 没有在 card-img-overlay 上使用 col-sm-12
我使用 bootstrap card-img-overlay 类创建了一个带有图像和文本叠加层的 cta。还添加了一个暗低不透明度的 div，使文本更亮。除 IE 11 外，所有浏览器都运行良好。
Q1： IE 中的列宽在哪里中断，我不认为是我的 css 导致了这部分。这是一个已知的引导程序 4 问题吗？
Q2： 如何修复覆盖 div 以显示在图像顶部，如 chrome 和其他浏览器。有没有更好的方法适用于两者？
打破 IE 图像
Chome 和其他运行良好的浏览器
.dnow-regionsContent .overlay-div {
height: 100%;
width: 100%;
position: absolute;
background-color: #000;
opacity: 0.3;
}
.dnow-regionsContent img {
max-height: 40rem;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>slick slider</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section class="dnow-regionsWrap">
<div class="dnow-regionsContent">
<div class="card bg-dark …1
推荐指数
推荐指数
1
解决办法
解决办法
657
查看次数
查看次数
Bootstrap 4 导航栏 flex 之间？
我刚开始使用 Bootstrap 4 并尝试主要使用引导类而不是使用 CSS。我堆叠了 2 个导航栏，我想将导航项展开，例如间隔，以便它占据页面的整个宽度，而不是全部向左堆叠。我弄乱了 d-flex 类并在 ul 中尝试了一些 flex-box。但它不起作用。
.text-spLeft{
margin-left: 5px;
}
.text-spRight{
margin-right: 5px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="./header.css">
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
</head>
<body>
<div class="main">
<div class="nav1">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="./images/dnowlogo.png" class="img-responsive">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" …0
推荐指数
推荐指数
1
解决办法
解决办法
2354
查看次数
查看次数
检查 3 个字符串中的 2 个是否为空以在 razor/c# 中执行某些操作
我有一个标签式图像和标题，我想根据图像是否存在来显示和隐藏。有 3 个图像和 3 个标题，如果每个图像的图像都是空的，我已经在隐藏标题（请参阅代码）。现在我有一个新要求，如果只有 3 个图像中的 1 个，则隐藏所有标题。顺便说一句，我正在通过检查“src”存在（这是一个字符串）来检查图像是否存在。
所以我知道我可以像这样检查所有字符串是否为空
bool allNull = strings.All(s => s == null);
但是我如何检查 3 个图像/字符串中的 2 个是否为空？
我目前的解决方案是一个简单的计数器，然后使用 jquery 删除标题，效果很好，但我想知道是否有 ac#/razor 答案（在 cshtml 文件中）
<div class="tabbed-images pt-25 pt-sm-50 pb-sm-25">
<div class="header">
@{
int counter = 0;
if (!string.IsNullOrEmpty(Model.BasicLevelImage.Src))
{
counter = counter + 1;
<div class="tab-item active bg-pl-basic">@Sitecore.Globalization.Translate.Text("PackageFeatureLevelBasic")</div>
}
if (!string.IsNullOrEmpty(Model.ProfessionalLevelImage.Src))
{
counter = counter + 1;
<div class="tab-item bg-pl-professional">@Sitecore.Globalization.Translate.Text("PackageFeatureLevelProfessional")</div>
}
if (!string.IsNullOrEmpty(Model.PremiumLevelImage.Src))
{
counter = counter + 1;
<div class="tab-item bg-pl-premium">@Sitecore.Globalization.Translate.Text("PackageFeatureLevelPremium")</div>
}
if …-1
推荐指数
推荐指数
1
解决办法
解决办法
39
查看次数
查看次数
标签 统计
bootstrap-4 ×5
css ×5
javascript ×5
html ×4
axios ×2
css3 ×2
jquery ×2
angularjs ×1
arrays ×1
asp.net-mvc ×1
asynchronous ×1
c# ×1
ecmascript-6 ×1
jspdf ×1
leaflet ×1
node.js ×1
razor ×1
reactjs ×1
redux ×1
slick.js ×1