时间戳

首页 > 解决方案 > OnChange 值输入类型数字调用切换一些值工作一些不工作

javascript - OnChange 值输入类型数字调用切换一些值工作一些不工作

问题描述

HTML 代码：

<input id="upper" type="number"  min="1" max="9" class="tbox_style" value="1">

 <div class="contents upper">
    <div class="u" id="am" data-color="red" >Upper Material 1</div>
    <div class="u" id="bm" data-color="yellow">Upper Material 2</div>
    <div class="u" id="cm" data-color="blue">Upper Material 3</div>
 </div>

查询代码：

$(document).ready(function() {
     var materials = [];
     $("#upper").change(function() {
            limit = $(this).val();

             $(".u").click(function(){
               var color = $(this).attr('data-color');
               var id = $(this).attr('id');

                $(this).css('background',$(this).attr('data-color'));
                var $el = $(this).toggleClass("u");

             });
       });

 });

CSS：

.u{
  background:#FFFFFF!important;
  color:#000000;
  }

演示

为什么我的切换不能与 value1和 3. 任何人请告诉我如何解决这个问题？

标签： javascriptjquery

解决方案

问题是在您更改#upper一次之前，您的点击功能将无法正常工作。我建议您将点击功能移出。

$(document).ready(function() {
  var materials = [];
  var limit = $("#upper").val();
  $("#upper").change(function() {
    limit = $(this).val();

  });

  $(".u").click(function() {
    var color = $(this).attr('data-color');
    var id = $(this).attr('id');
    if (limit > $('.upper :not(.u)').length) {
      $(this).css('background', $(this).attr('data-color'));
      var $el = $(this).toggleClass("u");
    } else if (!$(this).hasClass('u')) {
      var $el = $(this).toggleClass("u");
    }
  });
});
.u {
  background: #FFFFFF!important;
  color: #000000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="upper" type="number" min="1" max="9" class="tbox_style" value="1">

<div class="contents upper">
  <div class="u" id="am" data-color="red">Upper Material 1</div>
  <div class="u" id="bm" data-color="yellow">Upper Material 2</div>
  <div class="u" id="cm" data-color="blue">Upper Material 3</div>
</div>

推荐阅读