从 php 获取数据
let pars, lastMonth = [];
$.post('data.php',data => {
pars = $.parseJSON(data);
for(let prop in pars)
lastMonth.push(pars[prop]);
});
通过控制台查看
console.log(lastMonth);
它看起来像一个数组但是如果你这样做
console.log(lastMonth[0]);
然后未定义。
我究竟做错了什么？
[![фото2][2]][2]
如何使网格中的列在悬停时缩放，程序显示代码，所以你需要在这个css代码上构建，我添加了悬停。
#FlexGrid2 {
display: grid;
background-color: transparent;
background-image: none;
border: 0px solid #CCCCCC;
box-sizing: border-box;
margin: 0;
padding: 0;
font-size: 0px;
grid-column-gap: 1px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: auto;
grid-template-areas: "col1 col2 col3 col4 col5 col6 col7";
overflow: hidden;
align-items: center;
}
#FlexGrid2 > div {
display: flex;
background-color: transparent;
background-image: none;
border: 0px solid #FFFFFF;
padding: 0;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: space-around;
justify-content: space-around;
-webkit-align-items: center;
align-items: center;
-webkit-align-content: center;
align-content: center;
width: 100%;
height: 100%;
transition: all .3s linear;
}
#FlexGrid2 img {
margin: 0;
vertical-align: top;
border: 0px solid #000000;
box-sizing: border-box;
padding: 0;
display: block;
width: 100%;
height: auto;
max-width: 270px;
margin-left: auto;
margin-right: auto;
vertical-align: top;
}
#FlexGrid2 > div:hover{
cursor: pointer;
width: 200%;
margin: -50% 0;
}<div id="FlexGrid2">
<div class="col1">
<div id="wb_Image1">
<img src="https://images.unsplash.com/photo-1607022505609-a8978bdbe015?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=MXw2ODk0MXwwfDF8cmFuZG9tfHx8fHx8fHw\u0026ixlib=rb-1.2.1\u0026q=80\u0026w=1080" id="Image1">
</div>
</div>
<div class="col2">
<div id="wb_Image2">
<img src="https://images.unsplash.com/photo-1607801354062-c7520503e178?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=MXw2ODk0MXwwfDF8cmFuZG9tfHx8fHx8fHw\u0026ixlib=rb-1.2.1\u0026q=80\u0026w=1080" id="Image2">
</div>
</div>
<div class="col3">
<div id="wb_Image3">
<img src="https://images.unsplash.com/photo-1608755374285-1700d287bc52?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=MXw2ODk0MXwwfDF8cmFuZG9tfHx8fHx8fHw\u0026ixlib=rb-1.2.1\u0026q=80\u0026w=1080" id="Image3">
</div>
</div>
<div class="col4">
<div id="wb_Image4">
<img src="https://images.unsplash.com/photo-1608112906300-03db6a5af97c?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=MXw2ODk0MXwwfDF8cmFuZG9tfHx8fHx8fHw\u0026ixlib=rb-1.2.1\u0026q=80\u0026w=1080" id="Image4">
</div>
</div>
<div class="col5">
<div id="wb_Image5">
<img src="https://images.unsplash.com/photo-1608156618704-ab992d2e5152?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=MXw2ODk0MXwwfDF8cmFuZG9tfHx8fHx8fHw\u0026ixlib=rb-1.2.1\u0026q=80\u0026w=1080" id="Image5">
</div>
</div>
<div class="col6">
<div id="wb_Image6">
<img src="https://images.unsplash.com/photo-1608571785041-22349e5bfdb9?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=MXw2ODk0MXwwfDF8cmFuZG9tfHx8fHx8fHw\u0026ixlib=rb-1.2.1\u0026q=80\u0026w=1080" id="Image6">
</div>
</div>
<div class="col7">
<div id="wb_Image7">
<img src="https://images.unsplash.com/photo-1609439408825-b2a24e29871f?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=MXw2ODk0MXwwfDF8cmFuZG9tfHx8fHx8fHw\u0026ixlib=rb-1.2.1\u0026q=80\u0026w=1080" id="Image7">
</div>
</div>
</div>
需要判断用户是否在该区域的半径范围内，有一个经纬度点圣彼得堡59.93428、30.3351和一个活动半径，例如100公里，我们使用HTML5 Geolocation接收用户数据API，我们需要了解他是否包含在开源软件领域？
g {
fill: #fdd;
transition: 500ms;
}
g:hover {
fill: wheat;
}
text {
pointer-events: none;
}
.pol{
clip-path: polygon(270px 60px, 250px 80px, 285px 95px);
}<svg>
<defs>
<filter id="shadow" x=-50% y=-50% width=200% height=200%>
<feDropShadow dx="5" dy="5" stdDeviation="5"
flood-color="#333" flood-opacity=".1" />
</filter>
</defs>
<g>
<rect filter="url(#shadow)"
x="10" y="10" width="270" height="70" rx="25" />
<polygon points="270 60 250 80 285 95" />
</g>
<text x="140" y="50" text-anchor="middle">example text</text>
</svg>
<svg>
<defs>
<filter id="shadow" x=-50% y=-50% width=200% height=200%>
<feDropShadow dx="5" dy="5" stdDeviation="5"
flood-color="#333" flood-opacity=".1" />
</filter>
</defs>
<g>
<rect filter="url(#shadow)"
x="10" y="10" width="270" height="70" rx="25" />
<polygon class="pol" />
</g>
<text x="140" y="50" text-anchor="middle">Пример с clip-path</text>
</svg>我通过将这一行更改为这一行<polygon points="270 60 250 80 285 95" />来完成样式<polygon class="pol" />，但它不起作用
svg g:hover {
fill: red;
}
svg:hover {
fill: white;
}<svg width="300" height="100">
<defs>
<filter id="shadow" x=-50% y=-50% width=200% height=200%>
<feDropShadow dx="5" dy="5" stdDeviation="5" flood-color="#333" flood-opacity=".1" />
</filter>
</defs>
<g fill="#fdd">
<rect filter="url(#shadow)" width="270" height="60" x="15" y="15" rx="25" />
<polygon points="280 50 260 70 290 85" />
</g>
<text x="50%" y="50%"font-size="20" text-anchor="middle" font-family="Gilroy Medium ">Этот кот в SVG</text>
</svg>告诉我，当鼠标悬停在文本上时，svg 应该保存 fill: red; 如何实施？
“拖动”时，我无法将文本分配给特定元素，即 这不起作用，它会立即更改所有元素。
const svg = d3.select('body').append('svg')
.attr('width', 800)
.attr('height', 400);
const barHeight = 400,
padding = 1,
dataSet = [];
for (let i = 0; i < 20; i++) {
dataSet.push(i)
}
let bars = svg.selectAll('g')
.data(dataSet)
.enter()
.append('g')
.append('rect')
.classed('plot-bar', true)
.attr('y', 0)
.attr('x', (d, i) => i * 30)
.attr('width', 30 - padding)
.attr('height', barHeight);
let text = svg.selectAll("g")
.append('text')
.attr("x", (d, i) => i * 30)
.attr("y", 15)
.text(400);
let dragg = d3.drag()
.on('drag', () => {
let x = d3.event.sourceEvent.x;
bars.each(function() {
let r = this.getBoundingClientRect();
r.x < x && r.width + r.x > x ? d3.select(this).attr('height', d3.event.sourceEvent.y) : false;
})
text.text(d3.event.sourceEvent.y);
})
svg.call(dragg);.bar {
fill: steelblue;
}
.plot {
border: 2px solid #789;
background-color: burlywood;
}
.plot-bar {
fill: teal;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>不工作
(function($) {
'use strict';
sum: () => alert('Простой текст');
})(jQuery);
$(function() {
'use strict';
$('#btn').click(() => $.sum());
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" id="btn" value="Кнопка">从集合中获取元素的索引
$('.dop').on('click',function(){
var in = $(this).closest('[class^="col-"]').index();
$('#in').text(in);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="row">
<div class="col-1">
<div id="wb1">
<img src="" class="dop">
</div>
</div>
<div class="col-2">
<div id="wb2">
<img src="" class="dop">
</div>
</div>
<div class="col-3">
<div id="wb3">
<img src="" class="dop">
</div>
</div>
<div class="col-4">
<div id="wb4">
<img src="" class="dop">
</div>
</div>
<div class="col-5">
<div id="wb5">
<img src="" class="dop">
</div>
</div>
<div class="col-6">
<div id="wb6">
<img src="" class="dop">
</div>
</div>
</div>
<div id="in"></div>在 Qjuery3 及以上版本中，load() 方法被放弃了，虽然它还不错。现在我尝试使用 get() 来实现相同的目的，以提取特定的 div。但据我了解，它只能通过索引从集合中取出？或者也许是别的什么？
使用负载（）：
$('#indexHtml1').load('equipment.html #wb_equipmentLayoutGrid1');
使用 get()：
$.get("equipment.html", (data) => $('#indexHtml1').html($(data).get(17)));
创建一组新的标记元素，这些标记元素满足子输入 > 0 的条件，即 只留下那些孩子输入大于 0 的“col-”类的父母。
$('#account_calcLayoutGrid12 .row ').find('[class^="col-"]');<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="account_calcLayoutGrid12">
<div class="row">
<div class="col-1">
<div id="wb_account_calcImage2">
<img src="" id="account_calcImage2" alt="" title="Заголовок1">
</div>
<div id="wb_account_calcText19">
<span id="wb_uid23">Текст1</span>
</div>
<input type="number" id="account_calcEditbox1" name="dop1" value="0" spellcheck="false">
<div id="wb_account_calcText23">
<span id="wb_uid24"><strong><em>0 руб.</em></strong></span>
</div>
</div>
<div class="col-2">
<div id="wb_account_calcImage3">
<img src="" id="account_calcImage3" alt="" title="Заголовок2">
</div>
<div id="wb_account_calcText20">
<span id="wb_uid25">Текст2</span>
</div>
<input type="number" id="account_calcEditbox2" name="dop2" value="0" spellcheck="false">
<div id="wb_account_calcText24">
<span id="wb_uid26"><strong><em>0 руб.</em></strong></span>
</div>
</div>
<div class="col-3">
<div id="wb_account_calcImage7">
<img src="" id="account_calcImage7" alt="" title="Заголовок3">
</div>
<div id="wb_account_calcText21">
<span>Текст3</span>
</div>
<input type="number" id="account_calcEditbox4" name="dop3" value="0" spellcheck="false">
<div id="wb_account_calcText25">
<span id="wb_uid30"><strong><em>0 руб.</em></strong></span>
</div>
</div>
<div class="col-4">
<div id="wb_account_calcImage6">
<img src="" id="account_calcImage6" alt="" title="Заголовок4">
</div>
<div id="wb_account_calcText22">
<span id="wb_uid31">Текст4</span>
</div>
<input type="number" id="account_calcEditbox5" name="dop4" value="0" spellcheck="false">
<div id="wb_account_calcText26">
<span id="wb_uid32"><strong><em><span class="priceDop">0</span> руб.</em>
</strong>
</span>
</div>
</div>
</div>
</div>需要在 url 输入字段中指定 http:// 前缀和数字，例如 40 个字符。进入输入的时候应该是这样http://some link.rf/here something else/
$('#mask').inputmask({mask: 'https://*{40}'});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/jquery.inputmask.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input name="mask" id="mask">