Question

我在jquery上创建了一个函数，用户可以单击该值进入数据库的按钮并更新正文的颜色。所以整个界面都在变化。现在我尝试使用<a href='#' class='blue'/>Blue</a>而不是<a href="#" onClick="return false;" onmousedown="javascript:Swap('blue');">Blue</a>这样的类来制作锚标记我试图创建单独的.clicks()喜欢 - ＆gt; $('.blue').click(function(){});不仅是所有这些功能的一个功能。任何帮助都会很感激

这是我的代码：

   <?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

试试这个，希望它会有所帮助

<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>

Answer 2

谢谢@ user3795381你的回答帮助我指出了正确的方向。

这就是我想要的。

    <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>

Answer 3

我可以给你一些提示：

您可以将单个类用于保存数据库内容的所有链接。例如'do-save-color'。
您可以将要保存的数据存储为data-*属性。您可以将其命名为您想要的任何内容，但必须以data-开头。例如data-save-color="blue"。
```
<a href="page-that-saves-your-data.php?color=blue" data-save-color="blue">Save blue!</a>
```

使用全局观察员“捕获”对这些链接的点击次数

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

在你的函数中使用jQuery来读取数据属性，然后发布它：

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

这对你有帮助吗？

PS：为什么在使用AJAX保存时要location.reload()？

Answer 4

这是一个js ...的一些html-classes（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();
  });
});

Jquery分离

4 个答案: