Jquery分离

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>

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>

THanks @user3795381 your answer helped me point myself into the right direction.

This is what I was looking for.

    <script>

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

</script>

I could give you some tips:

1. You can use a single class for all links which save something to your database. For example 'do-save-color'.

2. You can store the data you want your to save as data-* attributes. You can name those to whatever you want but they have to start with data-. For example data-save-color="blue".

   <a href="page-that-saves-your-data.php?color=blue" data-save-color="blue">Save blue!</a>
   

3. Use a global observer which 'captures' clicks on those links

   $(document).on('click', '.do-save-color', function () {
     // Your saving logic here
   });
   

4. In your function use jQuery to read the data attribute and then post it:

   var $link = $(this),
       color = $link.data('save-color'); // color is now: "blue"
    // Your AJAX logic here
   

Does this help you?

PS: Why do a location.reload() when you are saving things using AJAX?

here is a example with some html-classes (js-*) for js ...

html:

<a href="#" data-color="blue" class="js-switch-style">Blue</a>
<a href="#" data-color="red" class="js-switch-style">Red</a>
<a href="#" data-color="green" class="js-switch-style">Green</a>

<p id="js-show" class="some-text">lall</p>

js:

$(".js-switch-style").click(function() {
  $.post("/", { color: $(this).data("color") }, function(data) {
    $("#js-show").html(data).show();
  });
});