How do add a class using jQuery upon script completion

Question

Problem:

Adding a CSS class to an input field once a jQuery script has been completed. The script is a dice function that will randomly generate 1 to 6 upon clicking on it. The number will be stored in a variable called result. I want to check the number in result and add a class to the input field that has that number in the value attribute.

JS code:

<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">

I have looked at and tried to use addClass() but I haven't been able to figure out how I check first the variable result against the different input field.

If the variable result has number 4 then I want to add a CSS class to input field that has value 4. Not requesting a solution, but appreciate rather guidance in this issue.

can you provide the fiddle of it?

Ehsan Sajjad
– Ehsan Sajjad

2014-03-26 06:51:02 +00:00
Commented Mar 26, 2014 at 6:51 — Ehsan Sajjad
– Ehsan Sajjad, Commented Mar 26, 2014 at 6:51

Milind Anantwar · Accepted Answer · 2014-03-26 06:50:23Z

1

try this:

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

answered Mar 26, 2014 at 6:50

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Adil Shaikh · Accepted Answer · 2014-03-26 06:50:31Z

1

Like this -

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

answered Mar 26, 2014 at 6:50

Adil Shaikh

44.8k17 gold badges95 silver badges112 bronze badges

Comments

Ehsan Sajjad · Accepted Answer · 2014-03-26 06:57:33Z

1

Assuming that you have the value of the input fields in result , as you are saying in the question

try like this:

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

See DEMO HERE

edited Mar 26, 2014 at 6:57

answered Mar 26, 2014 at 6:51

Ehsan Sajjad

62.6k16 gold badges112 silver badges171 bronze badges

Collectives™ on Stack Overflow

How do add a class using jQuery upon script completion

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related