可以用css做到这一点吗？将鼠标悬停在其中一个元素上时：text2、text3、text4、text1 将颜色更改为“小麦”
.list {
display: flex;
}
.item {
margin-right: 15px;
padding: 10px;
background: wheat;
}
.item:first-child {
background: #ccc;
}
.item:hover {
background: #ccc;
}<div class="list">
<div class="item">text1</div>
<div class="item">text2</div>
<div class="item">text3</div>
<div class="item">text4</div>
</div>
设置 css 属性，使块拉伸到屏幕高度的其余部分
flex-grow: 1
现在我不知道如何在调整窗口大小时动态计算高度。到目前为止，在 componentDidMount 中组件渲染后只设置了高度
演示 https://codesandbox.io/s/dynamic-calc-height-4t1zv?file=/src/Tile.js:163-180
代码示例
class Help extends React.Component {
constructor(props) {
super(props);
this.state = {
elementHeight: 0
};
}
componentDidMount() {
this.setState({ elementHeight: this.divRef.clientHeight });
}
render() {
return (
<div className="tile" ref={(element) => (this.divRef = element)}>
Div height: {this.state.elementHeight + " px"}
</div>
);
}
}
您需要遍历区域数组并根据 allZones 填充 active_zones 属性。那些。结果 active_zones = [1, 2, 3, 4, 5];
const allZones = [1, 2, 3, 4, 5];
const zones = [
{
id: 1,
type: "key",
label: "Ключ",
value: 12345,
active_zones: [1, 2, 5]
},
{
id: 2,
type: "key",
label: "Ключ",
value: 12345,
active_zones: [1, 2, 5]
}
];
有这样的输入：
const toothData = [
//1row topleft
{
id: 11,
},
{
id: 12,
},
{
id: 13,
},
{
id: 14,
},
{
id: 15,
},
{
id: 16,
},
{
id: 17,
},
{
id: 18,
},
// 2row topright
{
id: 21,
},
{
id: 22,
},
{
id: 23,
},
{
id: 24,
},
{
id: 25,
},
{
id: 26,
},
{
id: 27,
},
{
id: 28,
},
// 3row bottom-left
{
id: 31,
},
{
id: 32,
},
{
id: 33,
},
{
id: 34,
},
{
id: 35,
},
{
id: 36,
},
{
id: 37,
},
{
id: 38,
},
// 4row bottom-right
{
id: 41,
},
{
id: 42,
},
{
id: 43,
},
{
id: 44,
},
{
id: 45,
},
{
id: 46,
},
{
id: 47,
},
{
id: 48,
},
]
然后将其输出到这样的模板
class ToothList extends React.Component {
render() {
const toothTemplate = this.props.data.map(function (item, index) {
return (
<div className="tooth-item" key={index}>
<IconTooth/>
<span>
{item.id}
</span>
</div>
)
})
return (
<div className="tooth-list">
{toothTemplate}
</div>
)
}
}
如何显示这个包含在一个块中的 8 个项目的数组（它会变成 4 行）？
import React from 'react'
import moment from 'moment'
export default class Time extends React.Component {
render () {
return (
<div className="header_clock"></div>
)
}
}
此外，尚不清楚如何在 div header_clock 中显示
js文件结构
var test = 123;
require ('./custom/components/buttons.js');
require ('./custom/components/fixed-buttons.js');
require ('./custom/components/tabs.js');
require ('./custom/components/accordions.js');
require ('./custom/components/sliders');
然后如果你去 sliders.js 并做 console.log，你会得到这个错误：
sliders.js:296 Uncaught ReferenceError: test is not defined at Object.434 (sliders.js:296) at webpack_require (bootstrap 5dd9c166f83054f151df:54) at Object.171 (main.js:15) at webpack_require (bootstrap 5dd9c166f83054f151df:54)在 webpackJsonpCallback (bootstrap 5dd9c166f83054f151df:25) 在 main.js?v=1545639314088:1
.wrap {
position: relative;
margin-top: 50px;
padding: 20%;
}
.card {
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 80px;
background: #00d6d6;
}
.card-first{
top: -30px;
left: 20px;
background: red;
}<div class="wrap">
<div class="card">
Текст отзыва1
</div>
<div class="card">
Текст отзыва2
</div>
<div class="card card-first">
Текст отзыва3
</div>
<div class="card">
Текст отзыва4
</div>
</div>点开的时候，把线加宽一点（不管多少，主要是要明白怎么做才能更好）
<svg width=0 height=0>
<defs>
<symbol id="line">
<g transform="translate(-1.3,-227.2)">
<path
d="M 0.023821,295.48809 C 103.37996,270.41292 366.08908,254.16145 314.47619,259.20238 l -1.5119,-31.75 C 203.78198,275.16696 100.62384,269.86897 1.511911,228.96429 Z" fill="#00d6d6" />
</g>
</symbol>
</defs>
</svg>
<div class="column">
<span class="open">
Open
</span>
<svg viewBox="0 0 304 69">
<use xlink:href="#line"/></svg>
</div>我正在尝试以带边框的圆圈的形式实现一个计时器，直到下一张幻灯片。似乎已经想好如何在逻辑上构建它了：制作一个svg圆圈并填充笔划，大致按照以下公式：（周长）/（距离下一张幻灯片的时间）。
我真的需要关于如何完成这项任务的建议。也就是说，他感兴趣的是：用 svg 的什么参数来实现圆圈的间隔填充，以及在哪个滑动滑块事件上应用所有这些动作，可能是在 afterchange 上？
我尝试这样做是试图将进度条导航为一行 https://codepen.io/st-iv/pen/KGKgmv?editors=1010
$(document).ready(function(){
var time = 2;
var $bar,
$slick,
isPause,
tick,
percentTime;
$slick = $('.slider');
$slick.slick({
draggable: true,
adaptiveHeight: false,
dots: true,
mobileFirst: true,
pauseOnDotsHover: true,
});
$bar = $('.slider-progress .progress');
$('.slider-wrapper').on({
mouseenter: function() {
isPause = true;
},
mouseleave: function() {
isPause = false;
}
})
function startProgressbar() {
resetProgressbar();
percentTime = 0;
isPause = false;
tick = setInterval(interval, 10);
}
function interval() {
if(isPause === false) {
percentTime += 1 / (time+0.1);
$bar.css({
width: percentTime+"%"
});
if(percentTime >= 100)
{
$slick.slick('slickNext');
startProgressbar();
}
}
}
function resetProgressbar() {
$bar.css({
width: 0+'%'
});
clearTimeout(tick);
}
startProgressbar();
});
// circle bar
//Рассчитываем длину окружности по формуле (с=2πr)
var circleLength = $('.progress-round__wrap circle').attr('r')*Math.PI*2;
// здесь нужно будет сопоставить длину окружности со временем до перелистывания на другой слайд
$('.progress-round__wrap circle').css('stroke-dasharray', circleLength*part+','+circleLength);
});
$(document).ready(function(){
var time = 2;
var $circlebar;
$circlebar = $('.progress-round__wrap circle');
function resetCirclebar() {
$circlebar.css({
width: 0+'%'
});
clearTimeout(tick);
}
})
也许尝试与此解决方案结合使用 https://codepen.io/st-iv/pen/jeOMVm?editors=1010
如何在同一级别上对齐块中的文本，以使图片保持相同的大小（不同的高度和宽度）。flexbox 上理想的解决方案
.materials {
display: flex;
align-items: flex-start;
}
.materials .item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
}<div class="materials">
<div class="item">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT-z_gfgLD-hs2nhagIKxyPMS1MeUKCDpzcVVGaQSQmaClSG-lcFg" alt="">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor labore animi autem.
</p>
</div>
<div class="item">
<img src="https://lh3.googleusercontent.com/J5VOkREA-e0pn7uHn1Fw80xeuXwc4hTEYH2fsOw_dY1cTUkfMHPql5wRa7gy-LjjwUM=w300" alt="">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor labore animi autem.
</p>
</div>
</div>我使用这个插件https://jqueryvalidation.org/
提交后如何隐藏表单，此 hide() 失败。表格有好几种，所以我需要隐藏填写的那个
$(document).ready(function () {
$(".vacancies-form").validate({
ignore: ":hidden",
rules: {
name: {
required: true,
minlength: 2
},
phone: {
required: true,
minlength: 6
}
},
submitHandler: function (form) {
$.ajax({
type: "POST",
url: "sender.php",
data: $(form).serialize(),
success: function () {
$(this).hide();
}
});
return false;
}
});
});
部分成功：按“指定时间”按钮 - 选择时间 - 结果写入单选按钮的跨度 https://codepen.io/st-iv/pen/GXEYBP?editors=1010
但到目前为止，还无法以所需的格式显示数据：
例如 09/05/2018 10:00
现在有很多多余的东西，看起来不对，看起来像这样（虽然我在设置中指定了日期格式）：Fri Aug 17 2018 13:00:00 GMT+0800（中国标准时间）
请指教js代码要改什么，否则插件可能配置错误
$.datetimepicker.setLocale('ru');
$(document).ready(function () {
$("#exact-time").datetimepicker({
dayOfWeekStart: 1,
format: 'd/m/y H:i',
lang:'ru',
onSelectDate: function (d) {
$("span.exact-time__text").text(d);
}
});
$(".exact-time__radio").click(function () {
// $("span.exact-time__text").text('');
$("#exact-time").datetimepicker("show");
});
});
很奇怪，在 Windows 7 上，任何浏览器中都没有文本（字体无法识别）。禁用字体系列后，将显示文本。woff、woff2 格式中包含的字体
html, body {
font-size: 15px;
font-family: "Lato-Regular";
background: #eef9f9;
color: #000;
}
这是该网站的链接，以防万一
我正在尝试查找输入文件并将上传文件的名称写入其中，但我无法弄清楚错误的原因是什么
html
<form class="job-form vacancies-form" id="data" enctype="multipart/form-data" action="" novalidate="novalidate">
<div class="title">
<p>Запишитесь на собеседование</p>
</div>
<div class="success-msg">
<p class="name"></p>
<p class="text">Ваша заявка успешно отправлена!</p>
<p class="text">Вскоре мы свяжемся с Вами</p>
</div>
<div class="form-content">
<div class="input-wrap"><span class="input-title">Имя</span>
<input class="form-input" type="text" placeholder="" name="name">
</div>
<div class="input-wrap"><span class="input-title">Номер телефона</span>
<input class="form-input phone" type="text" placeholder="" name="phone">
</div>
<label class="file-label">
<input class="file-upload" type="file" placeholder="Прикрепить резюме" name="file[]" value="1" size="40" multiple="">Прикрепить резюме
</label>
<div class="note">
<p class="text">Отправляя это сообщение, вы соглашаетесь с </p>
<a class="link" href="https://klinikajemchujnaya.ru/politika-obrabotki-personalnykh-dannykh" target="_blank">политикой конфиденциальности</a>
</div>
<button class="btn-md btn btn--accent" type="submit"><span class="btn__text">Отправить</span></button>
</div>
</form>
js
$(document).ready(function () {
document.getElementsByClassName('file-upload')[0].onchange = function () {
if (this.files[0]) // если выбрали файл
document.getElementsByClassName('file-label')[0].innerHTML = this.files[0].name;
};
});
阿贾克斯
$("form#data").submit(function (e) {
e.preventDefault();
var formData = new FormData(this);
var formContent = $(this).find('.form-content');
var formTitle = $(this).children('.title');
var successMsg = $(this).children('.success-msg');
var successName = $(this).find('.success-msg .name');
$(this).addClass('vacancies-form--success');
formContent.hide();
formTitle.hide();
successMsg.show();
successName.text(formData.get('name'));
$.ajax({
url: 'sender.php',
type: 'POST',
data: formData,
success: function success(data) {
console.log(data);
},
error: function error(data) {
console.log('error sending');
formContent.show();
formTitle.show();
successName.text();
successMsg.hide();
$(this).removeClass('vacancies-form--success');
},
cache: false,
contentType: false,
processData: false
});
});
});
您需要在标签中显示填写的表单名称：
<form class="job-form header__call-form" id="dataler" method="post" enctype="multipart/form-data" action="">
<input type="hidden" name="checked_form" value="Заказ обратного звонка">
<div class="title">
<p>Заказ обратного звонка</p>
</div>
<div class="form-content">
<div class="input-wrap"><span class="input-title">Имя</span>
<input class="form-input" type="text" placeholder=" " required name="name">
</div>
<div class="input-wrap"><span class="input-title">Номер телефона</span>
<input class="form-input phone" type="text" placeholder=" " required name="phone">
</div>
<div class="input-wrap">
<fieldset class="header__call-quest">
<legend>Когда вам перезвонить?</legend>
<label>
<input id="timeChoice1" type="radio" name="worktime[]" checked value="Сейчас"><span>Сейчас</span>
</label>
<label>
<input id="timeChoice2" type="radio" name="worktime[]" value="Вечером"><span>Вечером</span>
</label>
<label>
<input id="timeChoice3" type="radio" name="worktime[]" value="Указать точное время"><span>Указать точное время</span>
</label>
</fieldset>
</div>
<div class="note">
<p class="text">Отправляя это сообщение, вы соглашаетесь с </p><a class="link" href="https://klinikajemchujnaya.ru/politika-obrabotki-personalnykh-dannykh" target="_blank">политикой конфиденциальности</a>
</div>
<button class="btn-md btn btn--accent" type="submit"><span class="btn__text">Заказать</span></button>
</div>
</form>
阿贾克斯
$("form#dataler").submit(function (e) {
e.preventDefault();
var formData = new FormData(this);
$.ajax({
url: 'sendler.php',
type: 'POST',
dataType: 'html',
data: formData,
success: function success(data) {
console.log(data);
$('.header__call-form').hide();
$('.header__call-form--success').show();
$('.header__call-form--success > .name').text(data.name);
},
error: function error(data) {
console.log('error');
// после отправки формы в консоле выводится массив с получеными данными
},
cache: false,
contentType: false,
processData: false
});
});
以及成功提交后按名称显示地址的块本身
<div class="header__call-form--success">
<p class="name">Username,</p>
<p class="text">Ваша заявка успешно отправлена!</p>
<p class="text">Вскоре мы свяжемся с Вами</p>
<div class="btn-white header-call--success__close"><span class="text">Закрыть</span></div>
</div>
您需要将此标签替换为用户在“名称”字段中输入的文本
<p class="name">Username,</p>
告诉我如何实现滑块与图片同步的解决方案。显然，但以防万一：向右转动滑块 - 滑块向右移动。向左滑动 - 向左滑动
下面的链接是我的尝试：
https://codepen.io/st-iv/pen/NLqwqb?editors=1010
用过 nouislider，想用光滑的滑块同步它
var connectSlider = document.getElementById('rangeSlider');
noUiSlider.create(connectSlider, {
start: 40,
connect: [true, false],
range: {
'min': 0,
'max': 100
}
});
但是有一个带有进度条的解决方案，也许那里的某些部分会有所帮助 https://codepen.io/st-iv/pen/JBmvWO?editors=1010
每次单击时，按钮的边框应逐渐填满，即当到达最后一张幻灯片时，按钮周围将有一个完整的边框。
一般来说，它看起来是这样的——点击“后退”按钮，“前进”按钮的行程会减少，即“前进”按钮充当progress bar
在codepen上有一个例子：
https://codepen.io/st-iv/pen/JBmvWO 您可能可以将下面的进度条作为基础，但到目前为止有些东西不起作用。而难点在于如何在元素周围布置这个不完整的边框
$slider.slick({
slidesToShow: 3,
slidesToScroll: 1,
speed: 400,
nextArrow: '<div class="slider-arrow arrow-next"><img src="https://upload.wikimedia.org/wikipedia/commons/a/a0/Green_Arrow_Right.svg" alt=""></div>', // Кастомная стрелка "далее"
prevArrow: '<div class="slider-arrow arrow-prev"><img src="https://upload.wikimedia.org/wikipedia/commons/a/a0/Green_Arrow_Right.svg" alt=""></div>', // Кастомная стрелка "назад"
});
});
无论后面有多少codepen.radio + label:before文本
，如何垂直对齐一个点
.button-radio{
padding: 15px 25px;
}
.radio {
position: absolute;
z-index: -1;
opacity: 0;
margin: 10px 0 0 7px;
}
.button-radio label p {
margin-top: 0;
margin-bottom: 15px;
}
.button-radio label p:last-child {
margin-bottom: 0;
margin-top: 0;
}
.radio + label {
position: relative;
width: 300px;
padding: 0 0 0 55px;
/* margin: 15px 25px; */
cursor: pointer;
display: inline-block;
line-height: 3;
border-radius: 25px;
border: 1px solid;
}
.radio + label:before {
content: '';
position: absolute;
top: 14px;
left: 15px;
width: 22px;
height: 22px;
border: 1px solid #CDD1DA;
border-radius: 50%;
background: #FFF;
}
.radio + label:after {
content: '';
position: absolute;
top: 18px;
left: 19px;
width: 16px;
height: 16px;
border-radius: 50%;
background: #9FD468;
box-shadow: inset 0 1px 1px rgba(0,0,0,.5);
opacity: 0;
transition: .2s;
}
.radio:checked + label{
background: #0f74a8;
color: #fff;
}
.radio:checked + label:after {
opacity: 1;
}
.radio:focus + label:before {
box-shadow: 0 0 0 3px rgba(255,255,0,.7);
}<div class="button-radio">
<input type="radio" class="radio" id="radio" name="group1" />
<label for="radio">
<p>
radiobtn1
</p>
</label>
</div>
<div class="button-radio">
<input type="radio" class="radio" id="radio2" name="group1" />
<label for="radio2">
<p>
radiobtn2
</p>
<p>
radiobtn2
</p>
</label>
</div>我不知道如何制作它，以便只有一个按下的按钮具有活动颜色。现在，单击后每个按钮都会添加一种颜色。
$('.view-btn').click(function(){
$(this).css("background", "#0074d6");
});.view-btn {
cursor: pointer;
padding: 15px;
color: #fff;
background: blue;
display: inline-block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="view-btn">
*
</div>
<div class="view-btn">
*
</div>
<div class="view-btn">
*
</div>