CODEWITHSUNDEEP
javascriptjqueryaddclassremoveclass
Rithu
Rithu

Reputation: 1289

JQuery addclass and Remove class applying to for each variables not working

In my page I used jquery addclass and remove class functionality to add border for selected image. But the images are within for loop. So it is not working for me and I tried myself with various codings. But I didn't get the expected result. The coding which I used

List of four images within for loop

<div id="containerborder">
        <?php foreach ($images as $image) { ?>

        <a href="javascript:;" title="<?php echo $heading_title; ?>" class="colorboxs" rel="<?php echo $image['popup'];?>"onclick="document.getElementById('image').src=this.rel"> <img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" id="<?php echo $image['popup']; ?>" onclick="swapborder(this.id);"/>
        </a>
        <?php } ?>

JQuery function 

<script>
 $(function() { 
 $('#contianer a').click(function() { return swapborder(this); }); 
 }); 
 // 
 function swapborder(clickObject) {
 var currentId=clickObject; 
 alert(currentId);
 $('#containerborder a').each(function() { 
 if ($(this).attr('id')==currentId) { 
 $(this).addClass('active-class'); 
 } 
else { $(this).removeClass('active-class'); } 
 }); 
 return false; 
 } 
 </script>

It shows the ID in alert. But after that the $('#containerborder a').each(function() { is not working and the border for the images are not applying. Can anyone help me to solve this issue. Thanks in advance

Upvotes: 1

Views: 2287

Answers (1)

Explosion Pills
Explosion Pills

Reputation: 191749

You mean to write var currentId = $(clickObject).attr('id')

However it would be way easier to just do this:

function swapBorder(elem) {
    $("#containerborder a").removeClass('active-class');
    $(elem).addClass('active-class');
}

Upvotes: 1

Related Questions