Jquery分离

Question

I created a function on jquery where the user can click the button the value goes into the db and updates the color of the body. So the whole interface changes. Now im trying to make the anchor tags with classes like <a href='#' class='blue'/>Blue</a> and not <a href="#" onClick="return false;" onmousedown="javascript:Swap('blue');">Blue</a> Im trying to create separate .clicks() like -> $('.blue').click(function(){}); not only one function for all of them. any help would be appreciate it

Here is my code:

   <?php
echo "Welcome, ".$_SESSION['username'].".<br/> ";
echo "My name is: ".$_SESSION['fname']." ";
?>
<br/>
<br/>
<a href="#" onClick="return false;" onmousedown="javascript:Swap('blue');">Blue</a>
<a href="#" onClick="return false;" onmousedown="javascript:Swap('red');">Red</a>
<a href="#" onClick="return false;" onmousedown="javascript:Swap('green');">Green</a>
<form action='' method='POST'>
    <br/><input type='submit' name='logout' value='Logout'/>
</form>
<div id="show"></div>
<script>
    function Swap(color){
        var url = "php/test.php";
        $.post(url, {ColorVar: color}, function(data){
            $("#show").html(data).show();
        });
        location.reload(true);
    }
</script>

Answer 1

Try this, hope it will help

<a href="javascript:void(0)" class="change-color" data-color="blue"/>Blue</a>
<a href="javascript:void(0)" class="change-color" data-color="red"/>Red</a>
<a href="javascript:void(0)" class="change-color" data-color="green"/>Green</a>
<script>

var url = "php/test.php";

$( document ).ready(function() {
    $(document).on('mousedown', '.change-color', function(){
        var color = $(this).attr('data-color');
        $.post(url, {ColorVar: color}, function(data){
            $("#show").html(data).show();
        });
        location.reload(true);
    })
});
</script>