Hai everybody,

<div class="whatever styledark myclass"></div>

I'm interested in the search-add class. This can be search-cancel, search-remove I want to get this class name when i click on the div, how i do i change this class name to other classes in the div.
onclick success remove class seaech-cancel and addclass seaech-add.
anybody plz help me.

This is my query function.

$('.search-cancel').click(function(){


         var personalId =$(this).find('input[type = "hidden"]').val();



            $.ajax({
                type    : "POST",
                cache   : false,
                url     : "/mypeople/addasfriend",
                data    : {
                            personalid: personalId ,

                        },
                success: function(data) {
                alert('Request Successfully Sended!');



                }
            });

    });

this is my template    

<?php foreach($alreadyexist as $al):?>
    <?php if($peoples['id']==$al['personal_id']): ?>
    <div class="search-cta search-cancel wp-arc">
    <input  type="hidden" value="<?php echo $peoples['id'] ?>"  />
        <p>Cancel Request</p>
    </div>
    <?php $displayed = true; ?>
    <?php endif;?>
    <?php endforeach;?>

try like this:(whenever you want to change the class name )

for adding class propery to a element (i.e div,table,....etc)

$("id-or-name-or-referenceof-ele").addClass("your-class-name-here");

for removing class property of a element

$("id-or-name-or-referenceof-ele").removeClass("your-class-name-here");

it may helpful to you. in case if you have any doubt on my clarification

let me know the status

happy coding

Hai i already tried this way,
not working,nothing to change.

i think you have to use jquery live() function to effect the chages immediately

i am giving a sample example to apply css dynamically using live() function

here is the code i think it may helps you a lot

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){

  var style_status = 1;

  $("button").live("click",function(){
  if(style_status == 1){
      $("#my_id").removeClass("mystyle");
      $("#my_id").addClass("mystyle2");
      style_status = 0; 
  }else{
      $("#my_id").addClass("mystyle");
      $("#my_id").removeClass("mystyle2");
      style_status = 1; 
  }

  });
});
</script>
</head>
<style type="text/css">
.mystyle{
    color:green;
    font-size: 100px;
}

.mystyle2{
    color:red;
    font-size: 50px;
}

</style>
<body>

<p>This is a paragraph.</p>
<div id="my_id">asdfasdfdas fasdfas d fasd fasdfasd f </div>
<button>Click me!</button>

</body>
</html>

use live function appropriately as your need then its work fine

let me know the status

happy coding

Per the jQuery documentation, "As of jQuery 1.7, the .live() method is deprecated." Instead it recommends that one "use .on() to attach event handlers." For a click event, it could look like $("button").on("click",function(){ /* blah blah code */ }.