点击DIV或A标签激活JS功能

Activate JS function on click of DIV or A tag

本文关键字：激活 JS 功能 标签 DIV 点击      更新时间：2023-09-26

我正在尝试通过ajax将一些数据传递给php文件，但前提是单击元素。

如何将每个 A 元素附加到相应的 JS 函数，并且只单击一次？

<a class="rating star1">1</a><br />
<a class="rating star2">2</a><br />
<a class="rating star3">3</a><br />
<script>
//CANT WORK OUT HOW TO ACTIVATE THIS FUNCTION ONLY IF .star1 IS CLICKED
function() { 
    $.post('/rate.php', {
    rating : '1', 
    page_id : '1234'
}, function(){
    });
}
//CANT WORK OUT HOW TO ACTIVATE THIS FUNCTION ONLY IF .star2 IS CLICKED
function() { 
    $.post('/rate.php', {
    rating : '2', 
    page_id : '1234'
}, function(){
    });
}
//CANT WORK OUT HOW TO ACTIVATE THIS FUNCTION ONLY IF .star3 IS CLICKED
function() { 
    $.post('/rate.php', {
    rating : '3', 
    page_id : '1234'
}, function(){
    });
}
</script>
将

click 事件处理程序添加到具有类rating的所有元素。 如果将 click 事件处理程序绑定到rating则可以消除一些重复的代码。

$(".rating").click(function(){
    $.post("/rate.php", {
        rating: $(this).html(), //will grab the rating from the html of clicked <a/>
        page_id: "1234"
    },function(){});
});

无需为每个链接提供函数

.HTML

<a class="rating" data-rate="1" >1</a><br />
<a class="rating" data-rate="2">2</a><br />
<a class="rating" data-rate="3">3</a><br />

.JS

$(document).ready(function(){
    $('.rating').click(function(){
        var rating_val = $(this).data('rate').val();
        $.post('/rate.php', {
            rating : rating_val, 
            page_id : '1234'
            }, function(){
        });        
    }
});
相关文章：