主页 / user-322089

Cobra777's questions

Martin Hope
Cobra777
Asked: 2022-07-01 18:51:21 +0800 CST
  • -4

任务是这样的：我是否需要在客户第一次滚动后 15 秒后向客户显示模式？vanilla JS/jquery 中的实现并不重要。

javascript
Martin Hope
Cobra777
Asked: 2022-05-20 00:00:31 +0800 CST
  • 1

伙计们，如何解决这个问题 - 我立即编写代码：

function onCalc() {
        const val = +document.querySelector('#input-value').value;
        const out = document.querySelector('#out-value');
        out.innerHTML = 'Итого:'+ val * 5;
    }
    document.querySelector('#calc-btn').onclick = onCalc;
<input id="input-value" type="text">
<button id="calc-btn" class="btn">Calculate</button>

<div id="out-value">Итого:</div>

这个任务很简单，已经写了很多，但有几个条件 - 1）输入和输出值必须以千分之一显示（例如：1,000 或 1,345,678.678.9）。2) 只有数字 + , + .! 我立即写输入类型=“数字”不提供！） - 不适合。我可以分别创建两个条件，但我还不能将它们组合在一起。有这个代码片段：

document
        .querySelector('#input-value')
        .addEventListener('input', function (e) {
            this.value = this.value.replace(/[^\d.]/g, '');
            this.value = this.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
        });

据它说：输入一切正常，但 NaN 进来了。一般来说，我会很高兴得到任何帮助。

javascript
Martin Hope
Cobra777
Asked: 2022-05-15 01:58:51 +0800 CST
  • 0

伙计们，告诉我有一个 func.component，它是 3 个元素的列表。如何将“活动”元素的功能附加到下面的代码中（即，当您单击列表元素时，将“选定”类添加到其中）？通常，要在列表的 3 个元素之间进行“切换”，其中必须的一个（也是唯一一个）处于活动状态。在下载开始时，列表的第一个元素始终处于活动状态。

function ListItems() {
    const changeSelectedSort1 = () => {
        setSelected(!selected)
        alert('1я функция')
    }
    
    const changeSelectedSort2 = () => {
        setSelected(!selected)
        alert('2я функция')
    }
    
    const changeSelectedSort3 = () => {
        setSelected(!selected)
        alert('3я функция')
    }
    
    const arrListIcons = [
        {id: 1, classes: 'fas fa-random', selected: true, handler: changeSelectedSort1},
        {id: 2, classes: 'fas fa-sort-alpha-up', selected: false, handler: changeSelectedSort2},
        {id: 3, classes: 'fas fa-sort-alpha-up-alt', selected: false, handler: changeSelectedSort3},
    ]
    
    const [selected, setSelected] = useState('......')
    
    return (
        <ul style={styles.ul}>
            {arrListIcons.map(item => (
                <ListItem key={item.id}
                                  classes={selected ? `${item.classes} selected` : `${item.classes}`}
                                  onClick={item.handler}/>
            ))}
        </ul>
    );
}

export default ListItems;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

我开始稍微解决这个问题，但我觉得我会搞砸很长时间。

稍后发现，这里有这样的解决方案 - React / How to assign classes on click？

但在我的版本中，立即有一个活动项目。一般来说，我会很高兴得到任何帮助。

reactjs
Martin Hope
Cobra777
Asked: 2022-08-19 01:44:06 +0800 CST
  • 0

伙计们，告诉我有关 React 的信息。功能组件绘制3个输入（type=range）+4个按钮（4个按钮之一处于活动状态，isActive数组）+总组件（从所有输入和按钮中收集值，根据公式=（高度+重量） - 年龄）* 比率）。问题：如何正确编写 ratio 变量，以便从 isActive 数组中获取活动按钮的“ratio”值？

export default function Component() {
    const [ranges, setRanges] = useState([
        {
            id: 'height',
            min: 50,
            max: 220,
            label: 'height (sm)',
            lng: 'lng-height',
            value: 135,
        },
        {
            id: 'weight',
            min: 1,
            max: 200,
            label: 'weight (kg)',
            lng: 'lng-weight',
            value: 100,
        },
        { id: 'age', min: 1, max: 110, label: 'age', lng: 'lng-age', value: 55 },
    ]);

    const [isActive, setActive] = useState([
        { id: 'a0', status: true, name: 'low', ratio: 1.2 },
        { id: 'a1', status: false, name: 'small', ratio: 1.375 },
        { id: 'a2', status: false, name: 'medium', ratio: 1.55 },
        { id: 'a3', status: false, name: 'high', ratio: 1.725 },
    ]);

    const chooseRange = (id, value) => {
        setRanges(
            ranges.map((item) => (item.id === id ? { ...item, value } : item))
        );
    };

    const chooseActive = (id) => {
        setActive(
            isActive.map((item) =>
                item.id === id ? { ...item, status: true } : { ...item, status: false }
            )
        );
    };

    const height = ranges[0].value;
    const weight = ranges[1].value;
    const age = ranges[2].value;

    let ratio = ????;

    const total = (height + weight - age) * ratio;

    return (
        <section id='component'>
                        <div className='line line2'>
                            <div className='ranges df'>
                                {ranges.map((item) => (
                                    <RangeInput
                                        key={item.id}
                                        onChange={chooseRange}
                                        value={item.value}
                                        {...item}
                                    />
                                ))}
                            </div>
                        </div>
                        <div className='line line3'>
                            <div className='btns df fww'>
                                {isActive.map((item) => (
                                    <Btn
                                        key={item.id}
                                        onClick={() => chooseActive(item.id)}
                                        ratio={item.ratio}
                                        className={
                                            item.status
                                                ? `btn lng-${item.name} active`
                                                : `btn lng-${item.name}`
                                        }>
                                        {item.name}
                                    </Btn>
                                ))}
                            </div>
                        </div>
                    </div>
                    <div className='line'>
                        <Total
                            title={'Result'}
                            subtitle={'Rate:'}
                            total={total}
                        />
                    </div>
        </section>
    );
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

reactjs
Martin Hope
Cobra777
Asked: 2022-08-15 15:41:18 +0800 CST
  • 0

有一个功能成分卡路里。它有 3 个组件。第一个 - Btns - 呈现 2 个按钮（其中一个是活动的），第二个和第三个组件 - 呈现表格。

更改按钮状态时如何将显示类添加到第 2 和第 3 个组件？

export default function Calories() {
  return ( <
    section id = 'сalories' >
      <Btns items = {['male', 'female']}/> 
      <table id = 'table-men' className = { ... ? 'bw show' : 'bw' } >
       ...
      </table> 
      <table id = 'table-women' className = { ... ? 'bw show' : 'bw' } >
       ...
      </table> 
    </section>
  );
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

reactjs
Martin Hope
Cobra777
Asked: 2022-06-12 22:25:34 +0800 CST
  • 0

任务很简单——如何正确地重新制作这段代码，以便打开父级的模态窗口，即 例如，当您单击按钮 #2 时，仅打开模式窗口 #2？

const modalTrigger = document.querySelectorAll('[data-modal]'),
  modal = document.querySelector('.modal'),
  modalCloseBtn = document.querySelector('[data-close]');

modalTrigger.forEach((el) => {
  el.addEventListener('click', () => {
    modal.classList.add('show');
    modal.classList.remove('hide');
    document.body.style.overflow = 'hidden';
  });
});

function closeModal() {
  modal.classList.add('hide');
  modal.classList.remove('show');
  document.body.style.overflow = '';
}

modalCloseBtn.addEventListener('click', closeModal);
.hide {
  display: none;
}

.show {
  display: block !important;
}

.modal {
  position: fixed;
  background-color: red;
  z-index: 77777;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}

.modal-close {
  font-size: 25px;
  cursor: pointer;
}

.modal-close:hover {
  color: white;
}
<div class="item">
  <p>Текст №1</p>
  <button data-modal>Read me</button>
  <div class="modal hide">
    <div data-close class="modal-close">&times;</div>
    <p>Mодальноe окно №1</p>
  </div>
</div>

<div class="item">
  <p>Текст №2</p>
  <button data-modal>Read me</button>
  <div class="modal hide">
    <div data-close class="modal-close">&times;</div>
    <p>Mодальноe окно №2</p>
  </div>
</div>

<div class="item">
  <p>Текст №3</p>
  <button data-modal>Read me</button>
  <div class="modal hide">
    <div data-close class="modal-close">&times;</div>
    <p>Mодальноe окно №3</p>
  </div>
</div>

javascript
Martin Hope
Cobra777
Asked: 2020-01-24 08:28:36 +0800 CST
  • 0

使用 ACF 插件在 WP 中编写代码。

条件：有图片（横幅）和滑块。他们在网站上共享一个位置。那些。如果有图片，则不显示滑块，如果没有图片，则显示滑块。

编码：


  <?php $banner = get_field('banner_stock');
            if (isset($banner)) { ?>
    <img class="offer-center__banner" src="<?php echo $banner['url']; ?>" alt="<?php echo $banner['alt']; ?>" />
    <?php } else { ?>

    <!-- Advantages - offer-center__slider -->
    <div class="offer-center__slider df">
      <!-- advantage №1 -->
      <a href="advantages" class="offer-center__slider_item">
        <?php $image = get_field('advantage_1_img'); ?>
        <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
        <p>
          <?php the_field('advantage_1_txt'); ?>
        </p>
      </a>
      <!-- advantage №2 -->
      <a href="advantages" class="offer-center__slider_item">
        <?php $image = get_field('advantage_2_img'); ?>
        <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
        <p>
          <?php the_field('advantage_2_txt'); ?>
        </p>
      </a>
    </div>

    <?php } ?>

在这种情况下，只满足第一个条件 - 显示图像（横幅），但是一旦您将其从 WP 数据库中删除，滑块就不想显示。你能告诉我如何正确编写代码以满足第二个条件 - 当数据库中没有图片并且显示滑块时？

php7