RError.com

RError.com Logo RError.com Logo

RError.com Navigation

  • 主页

Mobile menu

Close
  • 主页
  • 系统&网络
    • 热门问题
    • 最新问题
    • 标签
  • Ubuntu
    • 热门问题
    • 最新问题
    • 标签
  • 帮助
主页 / user-393824

Сергей Комыза's questions

Martin Hope
Сергей Комыза
Asked: 2024-09-05 00:25:19 +0000 UTC

Yandex 卡。单击时获取集群内的对象数据

  • 5

我在地图上显示了许多标记,这些标记被组合成簇。还有一个表单,其字段应包含在地图上单击的对象的值。 在此输入图像描述

因此,如果您单击单个标记,那么没有问题,我就是这样做的,但问题是当您单击任何集群内的对象时(当您单击集群时)我需要填写表单字段,有一个对象列表)- 在此输入图像描述

但我不明白如何点击这些对象并从中获取数据

这是我的卡代码

ymaps.ready(function () {
    var myMap = new ymaps.Map('map', {
        center: [56.841542, 60.571872],
        zoom: 4,
        controls: []
    }),
    objectManager = new ymaps.ObjectManager({
        clusterize: true,
        clusterDisableClickZoom: true
    });
    myMap.geoObjects.add(objectManager);

    objectManager.objects.events.add('balloonopen', function (e) {
        // Получим объект, на котором открылся балун.
        var id = e.get('objectId'),
            geoObject = objectManager.objects.getById(id);
        // Загрузим данные для объекта при необходимости.
        downloadContent([geoObject], id);
        let cityId = objectManager.objects.getById(id).properties.cityId;
        let shopId = objectManager.objects.getById(id).properties.shopId;
        let shopText = objectManager.objects.getById(id).properties.shopName;
        $('#contacts_form .js-cities-select').val(cityId).trigger('change');
        initShopsSelect($('#contacts_form .js-shops-select'), shopId, shopText);
    });
    objectManager.clusters.events.add('balloonopen', function (e) {
        // Получим id кластера, на котором открылся балун.
        var id = e.get('objectId'),
        // Получим геообъекты внутри кластера.
            cluster = objectManager.clusters.getById(id),
            geoObjects = cluster.properties.geoObjects;
            console.log(geoObjects)
        // Загрузим данные для объектов при необходимости.
        downloadContent(geoObjects, id, true);
    });


    function downloadContent(geoObjects, id, isCluster) {
        // Создадим массив меток, для которых данные ещё не загружены.
        var array = geoObjects.filter(function (geoObject) {
                    return geoObject.properties.balloonContent === 'идет загрузка...' ||
                        geoObject.properties.balloonContent === 'Not found';
                }),
        // Формируем массив идентификаторов, который будет передан серверу.
            ids = array.map(function (geoObject) {
                    return geoObject.id;
                });
        if (ids.length) {
            // Запрос к серверу.
            // Сервер обработает массив идентификаторов и на его основе
            // вернет JSON-объект, содержащий текст балуна для
            // заданных меток.
            ymaps.vow.resolve($.ajax({
                    url: '/local/ajax/map_balloons_json.php',
                    dataType: 'json',
                    processData: false
                })).then(function (data) {
                        // Имитируем задержку от сервера.
                        return ymaps.vow.delay(data, 1000);
                }).then(
                    function (data) {
                        geoObjects.forEach(function (geoObject) {
                            // Содержимое балуна берем из данных, полученных от сервера.
                            // Сервер возвращает массив объектов вида:
                            // [ {"balloonContent": "Содержимое балуна"}, ...]
                            geoObject.properties.balloonContent = data[geoObject.id].balloonContent;   
    });
             // Оповещаем балун, что нужно применить новые данные.
            setNewData();
            }, function () {
                geoObjects.forEach(function (geoObject) {
                    geoObject.properties.balloonContent = 'Not found';
                });
                // Оповещаем балун, что нужно применить новые данные.
                setNewData();
            }
        );
    }

        function setNewData(){
            if (isCluster && objectManager.clusters.balloon.isOpen(id)) {
                objectManager.clusters.balloon.setData(objectManager.clusters.balloon.getData());
            } else if (objectManager.objects.balloon.isOpen(id)) {
                objectManager.objects.balloon.setData(objectManager.objects.balloon.getData());
            }
        }
    }
   
    $.ajax({
        url: "/local/ajax/map_data_json.php"
    }).done(function (data) {
        objectManager.add(data); 
    });

});

这就是当您单击集群内的对象数组时的样子 在此输入图像描述

javascript
  • 1 个回答
  • 29 Views
Martin Hope
Сергей Комыза
Asked: 2023-11-16 21:24:54 +0000 UTC

如何使用Stroke-dashoffset实现虚线效果?

  • 6

有两个 svg。在顶部,请查看代码,使用该类,line我可以毫无问题地绘制一条线,将值stroke-dashoffset从 0 更改为 600,反之亦然。但那里的线是实心的,没有空格。

但在第二个svg中,线断了,y的值为stroke-dasharray71.7214,41.8375,stroke-dashoffset无论你放多少,都不会影响线的移动。

如何实现绘制虚线的效果,就像第一个svg中绘制实线一样?

https://codepen.io/sergeykomyza/pen/mdvqXgE?editors=1100

<svg class="line" viewBox="0 0 205 236" fill="none"><path class="route-animation" d="M172.114 0.939392C163.546 24.3208 183.614 32.5255 199.675 47.8074C204.434 52.3357 204.888 59.817 199.879 64.3424C189.107 74.0738 148.264 59.9168 150.854 72.7451C153.53 85.9943 188.061 104.531 189.618 105.799C203.284 116.932 207.735 145.174 200.208 160.658C194.852 171.676 159.342 167.962 148.172 164.293C75.024 140.266 107.985 143.131 25.8167 135.67C19.5265 135.099 12.9349 134.806 6.89385 136.65C0.671419 138.549 0.869364 146.339 2.95714 150.55C9.87574 164.506 40.8489 188.178 32.5138 206.523C29.9563 212.152 23.963 215.707 21.2644 221.27C19.1505 225.627 19.3849 230.772 18.4452 235.523" stroke="black" stroke-width="2"></path></svg>

<svg class="line2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 6250 4200" style="enable-background:new 0 0 6250 4200;" xml:space="preserve">
<style type="text/css">
    .st0{fill:none;stroke:#F26166;stroke-width:6;stroke-miterlimit:10;}
    .st1{fill:none;stroke:#F26166;}
</style>
<g>
    <g>
        <path class="st0" d="M89.8,4091.1c4-9.3,8.8-20.4,14.3-33.1"/>
        <path class="st1" stroke-width="6" d="M120.6,4019.7c97.3-224.9,333.4-754.8,580.3-1031.4c310.3-347.7,471.1-118.8,727.9-238    c315.2-146.2,415.3-518.1,625.8-754.8c196.9-221.5,468.9-348.4,865.1,12.3c258.8,235.6,463.7,459.9,805.9,426.6    c291.6-28.4,485.3-362.3,612.3-748.5c119.2-362.5,148.6-735.9,447-854.4c308.1-122.2,442.9,238.6,787.4,179.9    c216.1-36.8,289-316.5,388.9-524.3c64.1-133.2,136.3-265.5,175-334.8"/>
        <path class="st0" d="M6146.4,134.1c11.2-20,17.7-31.3,17.7-31.3"/>
    </g>
</g>
</svg>
.line{
  width: 300px;
  display: block;
  margin-bottom: 100px;
}
.line path{
  stroke-dasharray: 600;
  stroke-dashoffset: 0;
}

.line2{
  width: 600px;
}
.line2 .st1{
  stroke-dasharray:71.7214,41.8375;
}
svg
  • 1 个回答
  • 39 Views
Martin Hope
Сергей Комыза
Asked: 2021-11-23 17:11:17 +0000 UTC

行 js 中的 html 标记

  • 0

任何人都可以建议吗?使用创建反应应用程序。有这样一个组件-

import React from 'react'
import './Cases.sass'
import {CaseItem} from './CaseItem'
import case_1 from '../img/Cases/case-1.jpg'

class Cases extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            cases: [
                { caseImg: case_1, caseName: 'mysite.ru', caseSpecial: 'Оклейка автомобилей пленкой', caseText: 'Целевая аудитория: бизнес с автопарком, который необходимо забрендировать. Проблема – много трафика на сайте от частников, мало целевой аудитории. Результат: 2 месяца.' }
            ]
        }
    }

    render() {
        let cases = this.state.cases;
        return (
            <section className="cases">
                <div className="container">
                    <div className="row">
                        {
                            cases.map((item, i) => {
                                return(
                                    <div className="col-lg-4 col-md-12">
                                        <CaseItem img={item.caseImg} name={item.caseName} special={item.caseSpecial} text={item.caseText} key={i} />
                                    </div>
                                )
                            })
                        }
                    </div>
                </div>
            </section>
        )
    }
}

export default Cases

是否可以以某种方式在该行中注册 - caseText,html 标记?就像是 -

" "+<teg>+" Целевая аудитория: "+<teg/>+" бизнес с автопарком..."

但这不起作用。

javascript
  • 1 个回答
  • 10 Views
Martin Hope
Сергей Комыза
Asked: 2020-09-18 02:08:02 +0000 UTC

页面块滚动

  • 4

也许有人会告诉。在几个区块中有一个单页站点。而且我需要确保每个块在滚动时开始超出视口的上边界,开始以比跟随它的速度慢的速度滚动。嗯,依次类推。我从滚动文档开始通过可被 2 整除的“translateY”属性进行操作。在第一个屏幕上,它可以工作,但只是以某种方式生涩,然后垃圾开始了。我不明白为什么(有什么办法吗?但我只对纯js感兴趣。提前谢谢

https://codepen.io/sergo/pen/gOrdWaX?editors=0010

const sections = document.querySelectorAll('.section');

document.addEventListener('scroll', function(){
  let scrollPage = window.pageYOffset;
  
  sections.forEach( item => {
  
  let sectionTopBorder = item.getBoundingClientRect().top;
  let sectionBottomBorder = item.getBoundingClientRect().bottom;
  console.log(sectionBottomBorder);  
  if( sectionTopBorder < 0 ){
    item.style.transform = 'translateY(' + scrollPage / 2 + 'px)';
    // item.querySelector('.section__inner').style.position = "fixed";    
  } else{
    item.style.transform = 'translateY(0)';
    // item.querySelector('.section__inner').style.position = "relative"; 
  } 
  
  });
});
body{
  
}

.section{
  position: relative;
  height: 100vh;
  border: 1px solid;
  background: #FFF;
}

.section__inner{
  position: relative;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100vh;
}

.section__inner img{
  width: 100%;
  height: 100%;
}

*{
  margin: 0;
  padding: 0;
}
<div class="section-wrap">
  
  <section class="section" style="display: none;">
    <div class="section__inner"></div>
  </section>
  
  <section class="section section-1" style="z-index: 1; background: red">
    <div class="section__inner">
       <img src="https://tes-game.ru/_nw/14/08884847.jpg" alt="">
    </div>
  </section>
  
  <section class="section section-2" style="z-index: 2; background: green">
    <div class="section__inner">
      <img src="https://xage.ru/media/posts/2019/8/26/26-minutes-of-gameplay-dying-light-2-in-4k-trailer_BOLSTko.jpg" alt="">
    </div>
  </section>
  
  <section class="section section-3" style="z-index: 3; background: yellow">
    <div class="section__inner" >
   <img src="https://free4kwallpapers.com/uploads/originals/2020/05/02/game-art-wallpaper.jpg" alt="">
    </div>
  </section>
  
  <section class="section section-4" style="z-index: 4; background: pink">
    <div class="section__inner" >
      <img src="https://images.hdqwalls.com/wallpapers/bthumb/resident-evil-2-2019-4k-5a.jpg" alt="">
    </div>
  </section>
  
  <section class="section section-5" style="z-index: 5; background: grey">
    <div class="section__inner"></div>
  </section>
  
</div>

javascript
  • 1 个回答
  • 10 Views
Martin Hope
Сергей Комыза
Asked: 2020-08-01 03:23:41 +0000 UTC

javascript 上价格计算器的错误工作

  • 2

请帮忙。我为选定的产品制作了这个价格计算器。原则是 - 您选择产品的型号及其数量。您按下按钮 - 添加 - 并在下面自动创建该数量的位置。您可以创建任意数量的职位。总金额会相应变化。您还可以删除任何头寸,总金额减少,删除产品的价格。问题是,当您删除最近的位置时,一切正常。但是,如果您从中间或第一个头寸中删除一个头寸,则该头寸的价格将重复多次,因为在被删除的头寸下方有更多头寸。因此,从总金额中减去不正确。在我看来,问题出在数组(或者,正确的,导航,伪数组)中,我在其中使用了删除按钮。但究竟是什么,我无法理解。我正在迭代。通过 forEach 根本不起作用。

let mainPrice = document.querySelector('.price__input'); // итоговая цена
let create = document.querySelector('.wrap-item'); // общий блок с элементами
let chooseModel = create.querySelector('.model'); // поле выбора модели
let chooseQuantity = create.querySelector('.values'); // поле выбора кол-ва 
let more = document.querySelector('.more-item'); // кнопка добавить позицию
let boxItems = document.querySelector('.box'); // блок, куда генерятся созданные позиции

more.addEventListener('click', function(){
  
  let selectVal = chooseModel.selectedIndex; // индекс выбранного option
  let allOptions = chooseModel.options; // все option в select
  let currOption = allOptions[selectVal]; // конкретная выбранная позиция
  let chooseModelPrice = currOption.getAttribute('data-price'); // сумма, которая стоит data-price
  let chooseModelValue = chooseModel.value; // выбранная модель
  
  // итоговая цена = итоговая цена + сумма, которая стоит в data-price * кол-во выбранной модели
  mainPrice.value = +mainPrice.value + chooseModelPrice * chooseQuantity.value;
  
  // создаем блок с полями (модель и кол-во)
  let item = document.createElement('div');
  item.classList.add('item');
  
  // создаем поле с выбранной моделью
  let addModel = document.createElement('input');
  addModel.classList.add('add-model');
  addModel.value = chooseModelValue;
  
  // создаем поле с выбранным кол-вом
  let addValues = document.createElement('input');
  addValues.classList.add('add-values');
  addValues.value = chooseQuantity.value;
  
  // создаем поле с суммой за конкретное кол-во выбранной модели
  let price = document.createElement('span');
  price.classList.add('curr-price');
  price.innerHTML = chooseModelPrice * chooseQuantity.value;
  
  // создаем кнопку, при клике на кот. будет удаляться соответствующий блок с полями
  let deleteItem = document.createElement('span');
  deleteItem.classList.add('delete-item');
  
  // добавляем все созданные элементы
  boxItems.appendChild(item);
  item.append(addModel, addValues, price, deleteItem);
  
  // сбрасываем значения полей выбора
  chooseModel.value = "Выберите модель";
  chooseQuantity.value = 1;
  
  deleteFunc();
});

// удаление позиций
let deleteBtns = document.getElementsByClassName('delete-item');
function deleteFunc(){
  for(let elem of deleteBtns){
    let currPrice = elem.parentElement.querySelector('.curr-price').innerHTML;
    elem.addEventListener('click', function(event){
      console.log(elem.parentElement);
      elem.parentElement.remove();
      mainPrice.value = mainPrice.value - currPrice;
    });
  }
}
.form {
  width: 580px;
}
.form__item {
  width: 30%;
  margin: 0 0 30px 0;
}
.form__item label {
  display: block;
}
.form__submit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.wrap-item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.more-item {
  cursor: pointer;
}

.delete-item {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 30px;
  border: 1px solid;
  cursor: pointer;
}
.delete-item::after {
  content: "-";
  position: absolute;
  top: 50%;
  left: 50%;
}
<form id="form" class="form" action="">

  <div class="wrap-item">
      <div class="form__item">
        <label for="">Модель</label>
        <select class="model" name="">
          <option>Выберите модель</option>
          <option value="Модель 1" data-price="100">Модель 1</option>
          <option value="Модель 2" data-price="200">Модель 2</option>
          <option value="Модель 3" data-price="300">Модель 3</option>
        </select>
      </div>
      <div class="form__item">
        <label for="">Количество</label>
        <input type="number" class="form__input values" value="1" min="1">
      </div>
      <div class="form__item">
         <div class="more-item">Добавить позицию</div>
      </div>
 </div>
  <div class="box">

  </div>
<!--  ==========================  -->

<!--  ==========================  -->
  <div class="form__submit">
    <div class="form__price price">
      Итого:
      <input type="text" class="price__input" value="0">
      руб.
    </div>
  </div>
</form>

javascript
  • 1 个回答
  • 10 Views
Martin Hope
Сергей Комыза
Asked: 2020-06-14 04:29:51 +0000 UTC

在滚动时启动计时器。javascript

  • 2

任何人都可以建议吗?我正在编写一个脚本,当一个人将屏幕滚动到某个块时,它会启动一个计时器。计时器倒计时 10 秒。如果在技术方面。这一次一个人滚动了这个块(无论向哪个方向),然后计数器被重置,如果他研究了这个块10秒,那么另一个块出现了。所以,实际上,一个问题。我最初是否从右侧开始处理问题,为什么退出块时 clearInterval 不起作用?

// function printNumbers(from, to) {
//   let current = from;
//   const timerBox = document.querySelector('.timer');
//   let timerId = setInterval(function() {
//     timerBox.innerHTML = current;
//     if (current == to) {
//       clearInterval(timerId);
//       
//     }
//     current++;
//   }, 1000);
// }

document.addEventListener("DOMContentLoaded", function() {
  
let counter = 0;
let currentNum = 0;
const timerBox = document.querySelector('.timer');
const element = document.querySelector('.screen3');
const elemHid = document.querySelector('.screen-hidden'); 

window.addEventListener('scroll', function(){
  
  const elemPosition = {
    top: window.pageYOffset + element.getBoundingClientRect().top, 
    bottom: window.pageYOffset + element.getBoundingClientRect().bottom 
  }

  const windowPosition = {
    top: window.pageYOffset, 
    bottom: window.pageYOffset + document.documentElement.clientHeight 
  }
  
  if( elemPosition.top < windowPosition.bottom && elemPosition.bottom > windowPosition.top && counter == 0 ){

    let timerId = setInterval(function(){
      timerBox.innerHTML = currentNum;
      if(currentNum == 10){
        clearInterval(timerId);
      }
      currentNum++;
    }, 1000);
      
    counter = 1;
    
  } 
  else {
      clearInterval(timerId);
  }
  
});

});
.section{ height: 700px; }
.screen-hidden{display: none;}
.timer{ position: fixed; top: 0; left: 0; display: inline-block; padding: 20px; background: black; color: white; }
<div class="timer">0</div>
<section class="section screen1" style="background-color: red;"></section>
<section class="section screen2" style="background-color: yellow;"></section>
<section class="section screen3" style="background-color: green;"></section>
<section class="section screen-hidden" style="background-color: black;"></section>
<section class="section screen4" style="background-color: blue;"></section>
<section class="section screen5" style="background-color: pink;"></section>

javascript
  • 1 个回答
  • 10 Views

Sidebar

Stats

  • 问题 10021
  • Answers 30001
  • 最佳答案 8000
  • 用户 6900
  • 常问
  • 回答
  • Marko Smith

    我看不懂措辞

    • 1 个回答
  • Marko Smith

    请求的模块“del”不提供名为“default”的导出

    • 3 个回答
  • Marko Smith

    "!+tab" 在 HTML 的 vs 代码中不起作用

    • 5 个回答
  • Marko Smith

    我正在尝试解决“猜词”的问题。Python

    • 2 个回答
  • Marko Smith

    可以使用哪些命令将当前指针移动到指定的提交而不更改工作目录中的文件?

    • 1 个回答
  • Marko Smith

    Python解析野莓

    • 1 个回答
  • Marko Smith

    问题:“警告:检查最新版本的 pip 时出错。”

    • 2 个回答
  • Marko Smith

    帮助编写一个用值填充变量的循环。解决这个问题

    • 2 个回答
  • Marko Smith

    尽管依赖数组为空,但在渲染上调用了 2 次 useEffect

    • 2 个回答
  • Marko Smith

    数据不通过 Telegram.WebApp.sendData 发送

    • 1 个回答
  • Martin Hope
    Alexandr_TT 2020年新年大赛! 2020-12-20 18:20:21 +0000 UTC
  • Martin Hope
    Alexandr_TT 圣诞树动画 2020-12-23 00:38:08 +0000 UTC
  • Martin Hope
    Air 究竟是什么标识了网站访问者? 2020-11-03 15:49:20 +0000 UTC
  • Martin Hope
    Qwertiy 号码显示 9223372036854775807 2020-07-11 18:16:49 +0000 UTC
  • Martin Hope
    user216109 如何为黑客设下陷阱,或充分击退攻击? 2020-05-10 02:22:52 +0000 UTC
  • Martin Hope
    Qwertiy 并变成3个无穷大 2020-11-06 07:15:57 +0000 UTC
  • Martin Hope
    koks_rs 什么是样板代码? 2020-10-27 15:43:19 +0000 UTC
  • Martin Hope
    Sirop4ik 向 git 提交发布的正确方法是什么? 2020-10-05 00:02:00 +0000 UTC
  • Martin Hope
    faoxis 为什么在这么多示例中函数都称为 foo? 2020-08-15 04:42:49 +0000 UTC
  • Martin Hope
    Pavel Mayorov 如何从事件或回调函数中返回值?或者至少等他们完成。 2020-08-11 16:49:28 +0000 UTC

热门标签

javascript python java php c# c++ html android jquery mysql

Explore

  • 主页
  • 问题
    • 热门问题
    • 最新问题
  • 标签
  • 帮助

Footer

RError.com

关于我们

  • 关于我们
  • 联系我们

Legal Stuff

  • Privacy Policy

帮助

© 2023 RError.com All Rights Reserve   沪ICP备12040472号-5