RError.com

RError.com Logo RError.com Logo

RError.com Navigation

  • 主页

Mobile menu

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

Dina's questions

Martin Hope
Dina
Asked: 2025-04-27 23:14:47 +0000 UTC

如何通过循环将每个组分别传递给输入?

  • 5

继续这个问题

如果不为 0,则需要将每个组中的值传递给特定的输入

const btnsVal = [];
// Функция пересчитывает итоговую сумму
function calcPrice() {
  $('#tprice1 div').html(Math.trunc(+$('#price_old').val() * (1 + btnsVal.reduce((i, c) => i + c, 0) * 15 / 100)) + ' ₽'); // 15%
  $('#price2').val(Math.trunc(+$('#price_old').val() * (1 + btnsVal.reduce((i, c) => i + c, 0) * 15 / 100)));
}
// Запускается, когда document полностью отрисован в браузере
$(document).ready(function() {
  // Берем контейнер для кнопок
  const btns = $('#btns');
  // Размещаем в цикле 3 группы кнопок
  for (let i = 0; i < 3; i++) {
    // Добавляем начальное значение для каждой группы 
    btnsVal.push(0);
    // В input добавлен id группы для облегчения идентификации + в data атрибут положено минимально допустимое значение
    // В кнопки/ссылки добавлен класс clickBtn для селектора
    btns.html(btns.html() + `<div class="quantity_inner">
            <a href="javascript:;" class="clickBtn bt_minus z-depth-1">
                <svg viewBox="0 0 24 24"><line x1="5" y1="12" x2="19" y2="12"></line></svg>
            </a>
            <input type="text" value="0" size="2" class="quantity" data-max-count="4" data-min-count="0" data-idx="${i}" />
            <a href="javascript:;" class="clickBtn bt_plus z-depth-1">
                <svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
            </a>
        </div>`);
  }
  // При нажатии на кнопку +/-
  $('.clickBtn').click(function() {
    // Берем значение группы
    let $input = $(this).parent().find('.quantity');
    // Изменяем значение в зависимости от того, что это за кнопка, плюс или минус
    let count = +$input.val() + ($(this).hasClass('bt_minus') ? -1 : 1);
    $('#kids_count').val(count);
    // Проверяем, не выходит ли новое значение за допустимые пределы
    if (+$input.data('min-count') <= count && +$input.data('max-count') >= count) {
      // Если не выходит, меняем значение и пересчитываем
      $input.val(count);
      btnsVal[$input.data('idx')] = count;
      calcPrice()
    }
  });

  calcPrice();
})  
.col.s8 {
    width: 60%;
    float: left;
}
.col.s4 {
    width: 40%;
    float: left;
}
.modal-kids {
    line-height: 4;
}
.quantity_inner * {
  box-sizing: border-box;
}

.quantity_inner {
  display: flex;
  justify-content: center;
}

.quantity_inner .bt_minus,
.quantity_inner .bt_plus,
.quantity_inner .quantity {
  color: #BFE2FF;
  height: 40px;
  width: 40px;
  padding: 0;
  margin: 10px 2px;
  border-radius: 10px;
  border: 4px solid #BFE2FF;
  background: #337AB7;
  cursor: pointer;
  outline: 0;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 4px 6px rgba(0, 0, 0, 0.2);
}

.quantity_inner .quantity {
  width: 50px;
  text-align: center;
  font-size: 22px;
  color: #FFF;
  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
}

.quantity_inner .bt_minus svg,
.quantity_inner .bt_plus svg {
  stroke: #BFE2FF;
  stroke-width: 4;
  transition: 0.5s;
  margin: 4px;
}

.quantity_inner .bt_minus:hover svg,
.quantity_inner .bt_plus:hover svg {
  stroke: #FFF;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<!-- Исходное значение -->
<input name="price_old" id="price_old" type="hidden" value="790">
<form>
Значение из группы 1 <input name="kids_count1" id="kids_count1" type="text" placeholder="Автолюлька (1шт)" value=""><br>
Значение из группы 2 <input name="kids_count2" id="kids_count2" type="text" value=""><br>
Значение из группы 3 <input name="kids_count3" id="kids_count3" type="text" value=""><br><br>
<!-- или сделать один input для всех 3-х групп, через запятую value="Автолюлька (1шт), Автокресло (2шт)"-->
</form>

<input name="price2" id="price2" type="text" value="790">
<div id="tprice1" class="param__value"><div style="margin-right: 10px;color: #000;background: #ffca00;line-height: 21px;padding: 0 6px 0;border-radius: 4px;font-weight: 600;font-size: 14px;">790 ₽</div></div>

<div class="col s8">
      <div class="modal-kids">
             <strong>Группа 1 Автолюлька</strong>
             <span>До 6 месяцев</span>
      </div>
      <div class="modal-kids">
             <strong>Группа 2 Автокресло</strong>
             <span>0–7 лет</span>
      </div>
      <div class="modal-kids">
             <strong>Группа 3 Бустер</strong>
             <span>6–12 лет</span>
      </div>
</div>

<div class="col s4"><div id="btns"></div></div>

javascript
  • 1 个回答
  • 31 Views
Martin Hope
Dina
Asked: 2025-04-26 19:52:55 +0000 UTC

如何通过滑动关闭模式窗口?

  • 7

我怎样才能做出这样的模态窗口关闭效果?使用materialize codepen.io作为示例

在此处输入图片描述

<!-- Modal Trigger -->
  <a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>

  <!-- Modal Structure -->
  <div id="modal1" class="modal bottom-sheet">
    <div class="modal-content">
      <h4>Modal Header</h4>
      <p>A bunch of text</p>
    </div>
    <div class="modal-footer">
      <a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
    </div>
  </div>
css
  • 1 个回答
  • 40 Views
Martin Hope
Dina
Asked: 2025-04-20 19:03:00 +0000 UTC

输入改变后如何更改 html 块中的数据?

  • 5

几个输入字段分别包含从 0 到 4 的数据。这些输入中总共输入了多少个单位,div 中总数的百分比被添加到这个div id="price1"输入中,input id="price"

假设价格是 500 卢布

在输入框中输入 5

一个单位的投入=2%

500+10% 或 500x1.1

结果四舍五入到十分位

// Убавляем кол-во по клику
$('.quantity_inner .bt_minus').click(function() {
    let $input = $(this).parent().find('.quantity');
    let count = parseInt($input.val()) - 1;
    count = count < 0 ? 1 : count;
    $input.val(count);
});
// Прибавляем кол-во по клику
$('.quantity_inner .bt_plus').click(function() {
    let $input = $(this).parent().find('.quantity');
    let count = parseInt($input.val()) + 1;
    count = count > parseInt($input.data('max-count')) ? parseInt($input.data('max-count')) : count;
    $input.val(parseInt(count));
}); 
// Убираем все лишнее и невозможное при изменении поля
$('.quantity_inner .quantity').bind("change keyup input click", function() {
    if (this.value.match(/[^0-9]/g)) {
        this.value = this.value.replace(/[^0-9]/g, '');
    }
    if (this.value == "") {
        this.value = 1;
    }
    if (this.value > parseInt($(this).data('max-count'))) {
        this.value = parseInt($(this).data('max-count'));
    }    
});
.quantity_inner * {
    box-sizing: border-box;    
}    
.quantity_inner {
    display: flex;
    justify-content: center;
}        
.quantity_inner .bt_minus,
.quantity_inner .bt_plus,
.quantity_inner .quantity {
    color: #BFE2FF;
    height: 40px;
    width: 40px;
    padding: 0;
    margin: 10px 2px;
    border-radius: 10px;
    border: 4px solid #BFE2FF;
    background: #337AB7;
    cursor: pointer;
    outline: 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2), 0 4px 6px rgba(0,0,0,0.2);
}
.quantity_inner .quantity {
    width: 50px;
    text-align: center;
    font-size: 22px;
    color: #FFF;
    font-family:Menlo,Monaco,Consolas,"Courier New",monospace;
}
.quantity_inner .bt_minus svg,
.quantity_inner .bt_plus svg {
    stroke: #BFE2FF;
    stroke-width: 4;
    transition: 0.5s;
    margin: 4px;
}    
.quantity_inner .bt_minus:hover svg,
.quantity_inner .bt_plus:hover svg {
    stroke: #FFF;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<input name="price" id="price" type="hidden" value="534">
<div id="price1" class="param__value"><div style="margin-right: 10px;color: #000;background: #ffca00;line-height: 21px;padding: 0 6px 0;border-radius: 4px;font-weight: 600;font-size: 14px;">790 ₽</div></div>

<div class="quantity_inner">        
    <a href="javascript:;" class="bt_minus">
        <svg viewBox="0 0 24 24"><line x1="5" y1="12" x2="19" y2="12"></line></svg>
    </a>
    <input type="text" value="0" size="2" class="quantity" data-max-count="4" />
    <a href="javascript:;" class="bt_plus">
        <svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
    </a>
</div>
---------------------------------
<div class="quantity_inner">        
    <a href="javascript:;" class="bt_minus">
        <svg viewBox="0 0 24 24"><line x1="5" y1="12" x2="19" y2="12"></line></svg>
    </a>
    <input type="text" value="0" size="2" class="quantity" data-max-count="4" />
    <a href="javascript:;" class="bt_plus">
        <svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
    </a>
</div> 

javascript
  • 1 个回答
  • 41 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