Question

问题：

完成jQuery脚本后，将CSS类添加到输入字段。该脚本是一个骰子功能，点击它后会随机生成1到6个。该数字将存储在名为结果的变量中。我想检查结果中的数字，并将一个类添加到值属性中具有该数字的输入字段。

JS代码：

<script type="text/javascript">
    $(document).ready(function()
    {
        $('.dice').on('click','li',function(){
                $('.cube').attr('class','cube '+$(this).attr('data-opt'))
            }).on('click','.select',function(){
                $('.dice').toggleClass($(this).attr('data-opt'))
            }).on('click','#spin',function(){
                var result = Math.round(Math.random()*5 + 1)
                , angle = {}
            $(this).data('n',$(this).data('n')?0:5);
            var n = $(this).data('n');
            $('.cube').attr('style','');
            angle = {x:360*n,y:360*n}

            switch (result){
              case 1:
                break;
              case 2:
                angle.y = 360*n + 90;
                break;
              case 3:
                angle.x = 360*n - 90;
                break;
              case 4:
                angle.x = 360*n + 90;
                break;
              case 5:
                angle.y = 360*n - 90;
                break;
              case 6:
                angle.x = 360*n + 180;
                break;
            }
            $('.cube').css({'-webkit-transform':'translateZ(-100px) rotateX(' + angle.x + 'deg) rotateY(' + angle.y + 'deg)','-webkit-transition':'3s'})

            $.ajax ({
                url: 'savedice.php',
                data: {"diceId": result},
                type: 'post',
                success: function(data) {
                    //Success
                }
            });

        })
  });
</script>

HTML code：

<input class="number" name="alternative[]" type="text" value="1">
<input class="number" name="alternative[]" type="text" value="2">
<input class="number" name="alternative[]" type="text" value="3">
<input class="number" name="alternative[]" type="text" value="4">
<input class="number" name="alternative[]" type="text" value="5">
<input class="number" name="alternative[]" type="text" value="6">

我已经查看并尝试使用addClass（），但我还没有弄清楚如何首先检查变量 result 对不同的输入字段。

如果变量结果的编号为4，那么我想将CSS类添加到值为4的输入字段。不请求解决方案，但感谢指导这个问题。

Answer 1

试试这个：

if(result == 4){
     $('input[value="4"]').addClass('someclass');
}

Answer 2

喜欢这个 -

if(result == 4){
  $('.number').filter(function(){return this.value === result;}).addClass('someClass');
}

Answer 3

假设您在result中有输入字段的值，正如您在问题中所说的那样

尝试这样：

$('input.number[value="'+result+'"]').addClass("MyClass");

请参阅DEMO HERE

如何在脚本完成时使用jQuery添加类

3 个答案: