结合jquery和剑道的例子答案

【问题标题】：combine jquery and kendo example结合jquery和剑道的例子
【发布时间】：2021-03-26 04:06:17
【问题描述】：

我找到了一个this post，并将工作示例简化为一个显示数字的输入字段和两个按钮，您可以在其中输入和减少整数值，如您所见here。

...
 <input type="text" name="quantity" size="2" value="1" />
...
<div class="quantity-wrapper pull-left">
   <span class="add-up add-action fa fa-plus"></span>
   <span class="add-down add-action fa fa-minus"></span>
 </div>
...

 $(document).ready(function () {

     $(".quantity-adder .add-action").click(function () {
         if ($(this).hasClass('add-up')) {
             var text = $(this).parent().parent().parent().find("[name=quantity]", '.quantity-adder')
             text.val(parseInt(text.val()) + 1);
         } else {
             var text = $(this).parent().parent().parent().find("[name=quantity]", '.quantity-adder')
             if (parseInt(text.val()) > 1) {
                 
             
                text.val(parseInt(text.val()) - 1);
             }
         }
     });

 });

我想添加一个剑道下拉列表，就像我在this link 中尝试的那样。但是 +/- 按钮不见了。有人可以告诉我如何解决这个问题吗？

【问题讨论】：

标签： javascript css kendo-ui

【解决方案1】：

我相信您正在寻找这样的东西。在 Telerik DOJO 中试试这个。我会把 CSS 的东西留给你。如果您要重用此功能，那么我建议您将其创建到自定义小部件中。有关扩展 Widget 类的信息，请参阅 Kendo 文档。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.default-v2.min.css"/>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2021.1.330/js/kendo.all.min.js"></script>
</head>
<body>
  <input id="dropdownlist" />
  <input type="text" name="quantity" size="2" value="1" />
  
  <div class="quantity-wrapper">
    <button class="up">+</button>
    <button class="down">-</button>
 </div>
<script>
  $(document).ready(function() {
    var $quantity = $("[name=quantity]");
    $("#dropdownlist").kendoDropDownList({
      dataSource: {
        data: ["Banana", "Lemon"]
      }
    });

    $(".quantity-wrapper").on("click", "button", function () {
      var quantity = parseInt($quantity.val());
      
      if ($(this).hasClass("up")) {
        $quantity.val(quantity + 1);
      } else {
        if (quantity > 1) {
          $quantity.val(quantity - 1);
        }
      }
    });
  });
</script>
<style>
  .quantity-wrapper {
    display: inline-grid;
  }
</style>
</body>
</html>

【讨论】：

【解决方案2】：

只需添加按钮而不是跨度

<div class="quantity-wrapper pull-left">
            <button class="add-up add-action fa fa-plus">+</button>
            <button class="add-down add-action fa fa-minus">-</button>
 </div>

【讨论】：

你以前试过吗？我将它 c/p 到 example 没有任何效果。