How to add class dynamically using javascript

Question

I want to add an class to an closest element of an click object.

If you see code below, I would like to add an class to .process-signs-direction-cover-button

There is an loop, so the above classes get's repeated. But I want to add an classes to closest() .process-signs-direction-cover-button of where I click.

See picture

MY php:

                <div class="col-md-6 reduced_padding_col7">
            <?php
                $signs_to_direction_and_cover_process = $mysqli_scs->query("SELECT * FROM agsigns_db3.stock_stk where idstc_stk = ".$row['idstc_stk']." AND directioncolor_stk = 'Yellow' ");
                $row_cnt = $signs_to_direction_and_cover_process->num_rows;



                if($row_cnt > 0){ 

                while ($row = mysqli_fetch_assoc($signs_to_direction_and_cover_process)) { ?>

                    <div class="col-md-4 thumbnail"><img src="../../css/sign-directions/<?php echo $row['directionimage_stk']; ?>" class="processing-signs-direction-cover-sign-direction-selection-process" id="<?php echo $row['id_stk']; ?>" />
                            <div class="col-xs-12 text-center signs-text">
                                <span class="current_stock_figure">
                                        <?php echo $row['stock_stk'] == ""  ? "N/A" : $row['stock_stk']; ?>
                                </span> 
                                    <span class="max_stock_figure">
                                        <?php echo $row['maxlevel_stk']; ?>
                                    </span>
                            </div>
                    </div>


                <?php
                    }
                }
            ?>
        </div>

        <div class="col-md-2 process-button">
                <img src="../../css/buttons/process-signs-covered-disabled.png" id="" class="process-signs-direction-cover-button disabled_button" rel="<?php echo $row['signcode_sgn']; ?>" alt="covered"/>

            <div class="options-remember-checkbox">
                <input type="checkbox" class="rememberoptions" name="rememberoption" value="checked" > Remember Options<br>
            </div>

MY JQuery

$(".processing-signs-direction-cover-sign-direction-selection-process").click(function() {

        $(this).closest("process-button.process-signs-direction-cover-button").toggleClass("process");


     });

Modify Question Modified Image code

$(this).closest("process-button.process-signs-direction-cover-button").addClass("process"); — Manikant Gautam
– Manikant Gautam, Commented Dec 20, 2017 at 11:34
Just a tip, your HTML has your PHP code in there, for your question it wouldn't be required and just makes answering a lot harder. What you can do though is copy the rendered HTML and paste here. It would also make it so users could even create a Snippet from it. — Keith
– Keith, Commented Dec 20, 2017 at 11:36
closest means the closest ancestor. Your .process-signs-direction-cove‌r-button element is not an ancestor of the element you click. You need to post more of your html structure (the common ancestors of both elements if you want more help) — Gabriele Petrioli
– Gabriele Petrioli, Commented Dec 20, 2017 at 11:39
I have added the HTML code structure as an image. If you look for Question Modified heading in original question. — Connor Cambridge
– Connor Cambridge, Commented Dec 20, 2017 at 11:45

Manikant Gautam · Accepted Answer · 2017-12-20 11:38:42Z

1

In your jquery part use addClass instead of toggleClass .

 $(".processing-signs-direction-cover-sign-direction-selection-process").click(function() {
      $(this).closest("process-button.process-signs-direction-cover-button").addClass("process");
 });

edited Dec 20, 2017 at 11:38

answered Dec 20, 2017 at 11:36

Manikant Gautam

3,5911 gold badge20 silver badges30 bronze badges

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

1 Comment

Connor Cambridge Over a year ago

This didn't worked. I have added the code structure as image

Collectives™ on Stack Overflow

How to add class dynamically using javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related