Could you point how to obtain an effect of choosed at a bootstrap card ?

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER

Hi Chris

So did I, but I had no effects when a card is clicked.

<style>

.card { margin: 15px; }

.card.clicked {
    background-color: green;
}

</style>

<script>

	$('.card').click(function() {

		$('.card').removeClass('clicked'); // remove it from all other cards
		$(this).addClass('clicked');
		
		
		$('#CampaignID').val( $(this).data('campaignid') )
	})
	
   
</script>

Hey Eduardo,

Usually, when writing jQuery code (or any javascript code for that matter) we need to defer to firing of it until all the elements are loaded. In jQuery, we ddo this by wrapping it in a DOM Ready function, so just edit your code to do that:

<script>
$(function() {

    $('.card').click(function() {
        $('.card').removeClass('clicked'); // remove it from all other cards
        $(this).addClass('clicked');

        $('#CampaignID').val( $(this).data('campaignid') )
    });

});
</script>

I suspect that will solve your problem.

ASKER

Hi Chris

So did I, but still not running.

Maybe something else is preventing it to run.

The cards:

       <div class="row no-gutters">
            	@foreach ($campaigns as $campaign)  
            	<div class="col-3">
            		<div class="card bg-light" data-campaignid="{{ $campaign->CampaignID }}">
            			<img src="/img/img_logo.png" class="img-fluid img-responsive">
            			<h5 class="card-title">{{ $campaign->CampaignID }} {{ $campaign->CampaignName }}</h5>
            		</div>
            	</div>
            	@endforeach
            </div>

Ahh right. You have the bg-light class on your card, which is a BootStrap class to change the background colour. That style rule is tagged with !important, so it's overriding your .clicked class.

You have a few options. You can remove the bg-light class from your card:

<div class="card" ...

You can set your own rule to be important:

.card.clicked { background-color: green !important; }

Or you can choose to style something within the card instead of the card itself:

<div class="card bg-light">
<div class="wrapper">
<h5>This is a card</h5>
</div>
</div>

.card.clicked .wrapper { background-color: green; }

Any one of those solution will work, but they all have their pros and cons.

ASKER

Just removing bg-light class make it runs!

ASKER

Chris

Thank you for the help!