如何使用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

Answer 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");
 });