Dynamically change a div's CSS attribute class php

Question

After viewing 4 data I want to change a div's class. Suppose when it is 4 data the div will be after 4 data the div will be dynamically.

<div class="carousel-inner" role="listbox">
<?php 
    $i=0;
    $sql = mysqli_query($con,"SELECT * FROM product WHERE featured = 'featured' ORDER BY id DESC");
        while($row = mysqli_fetch_assoc($sql)){
        if($i == 4){ echo '<div class="item active">';}
        elseif($i != 4){ echo '<div class="item">'; }
?>
     <div class="single-wid-product sel-pd">
        <img src="admin/upload/<?php echo $row['file']; ?>" alt="" class="product-thumb">
     </div>

    </div>
    <?php $i++; } ?>

</div>

In that picture it is a carousel. It has 4 items active. And the div is

<div class="item active">
 <p>Item 1</p>
 <p>Item 2</p>
 <p>Item 3</p>
 <p>Item 4</p>
</div>

When it's doing autoplay (for the rest products) the div is

<div class="item">
 <p>Item 5</p>
 <p>Item 6</p>
 <p>Item 7</p>
 <p>Item 8</p>
</div>

And for others the div is

   <div class="item">
     <p>Item 5</p>
     <p>Item 6</p>
     <p>Item 7</p>
     <p>Item 8</p>
    </div>

So I want to make to merge all those divs. For the first 4 items the div class will be "item active" and for the rest items the class will be "item". It will be changed dynamically.

What are you trying to make happen? What have you tried? Your current explanation is hard to understand. — adamoffat
– adamoffat, Commented Aug 15, 2018 at 18:16
When it fetch 4 row data from database the div will be <div class="item active"></div> after 4 row data the div will be <div class="item"></div> — Mehedi Hasan Siam
– Mehedi Hasan Siam, Commented Aug 15, 2018 at 18:26
So you want to make the 4th row of data have that, but no other row? — adamoffat
– adamoffat, Commented Aug 15, 2018 at 18:27
I have some products in database. When fetching 4 data the div's class will be "item active" for the rest data the class will be "item" — Mehedi Hasan Siam
– Mehedi Hasan Siam, Commented Aug 15, 2018 at 18:34

CodeGodie · Accepted Answer · 2018-08-15 18:32:06Z

2

You can use a PHP ternary operator right on your HTML for this. You can do that in this manner:

while ($row = mysqli_fetch_assoc($sql)) {
    ?>
        <div class="item <?= ($i == 4) ? "active" : "" ?>">
            ...
        </div>
    <?php 

    $i++;
}

Note: <?= '' ?> is the same as <?php echo '' ?>

edited Aug 15, 2018 at 18:32

answered Aug 15, 2018 at 18:28

CodeGodie

12.2k6 gold badges40 silver badges66 bronze badges

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

7 Comments

adamoffat Over a year ago

I would recommend this method.

Mehedi Hasan Siam Over a year ago

It's work, but its showing only one data. but I want after fetching 4 data the div's class will be changed

CodeGodie Over a year ago

Sorry, I dont understand what you mean. Please be more detailed.

CodeGodie Over a year ago

So, it sounds like after the 4th iteration, you want all to items to have the "active" class. If thats the case you have to look at $i as @IncredibleHat mentioned. Keep in mind that you are declaring $i as $i=0 before the loop begins, meaning that the first iteration $i is 0, then 1, 2.. so you check if $i > 3 to apply the active to all items after the 4th iteration.

IncredibleHat Over a year ago

So, the updated question really puts a different spin on the needed solution, since you are showing some <p> tags which don't exist in your php code. So it now looks like you want to group 4 items into a single div, where that parent container has the active class on the first, but not the remaining groups of 4 items. Heh... uhhhh ... thats a whole new question now! ;)

|

Collectives™ on Stack Overflow

Dynamically change a div's CSS attribute class php

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related