Question

我在页面上有多个图像，希望每个图像上都有一个类似的按钮。现在它可以正常工作了，单击它可以更新您喜欢的图像的数据库，并将图像更改为红色，但是发生了两件事：

单击一个类似按钮时，会将所有设置都关闭，但是只有一个被单击即可提交到数据库。
我无法再点击以与众不同。

我已经尝试过使用jQuery和Ajax，当单击heart / like按钮时，它将使用'attr'更改所有参数以反映不同的形式。

//这是“赞”按钮的形式

<form class='like_form_p' name='like' action='/like.php' method='post'>
    <input type='hidden' style='display:none;' name='aid' id='aid' value='".$results['aID']."'>
    <input type='hidden' style='display:none;' name='uid' id='uid' value='".$uid."'>
    <input type='hidden' style='display:none;' name='currenturl' id='currenturl' value='".$currentURL."'>
    <input type='hidden' style='display:none;' name='pId' id='pId' value='".$cover['pId']."'>
    <input type='image' class='like_btn' src='/images/heart.png' alt='submit' width='24' height='20'>
</form>

//这是不相似按钮的形式

<form class='unlike_form_p' name='unlike' action='/unlike_cover.php' method='post'>
    <input type='hidden' style='display:none;' name='aid' id='aid' value='".$results['aID']."'>
    <input type='hidden' style='display:none;' name='uid' id='uid' value='".$uid."'>
    <input type='hidden' style='display:none;' name='currenturl' id='currenturl' value='".$currentURL."'>
    <input type='hidden' style='display:none;' name='pId' id='pId' value='".$cover['pId']."'>
    <input type='image' class='like_btn' src='/images/heart_a.png' alt='submit' width='24' height='20'>
</form>

//这是运行的jQuery脚本

<script>
function like()
{   
    $('.like_form_p').attr('action', '/unlike.php');
    $('.like_form_p').attr('class', 'unlike_form_p');
    $('.like_btn').attr('src', '/images/heart_a.png');
};
function unlike()
{
    $('.unlike_form_p').attr('action', '/like.php');
    $('.unlike_form_p').attr('class', 'like_form_p');
    $('.like_btn').attr('src', '/images/heart.png');
};

$(document).ready(function(){

    $('.like_form_p').on('submit', function(event){
        event.preventDefault();
        var form_data = $(this).serialize();
        console.log(form_data);
        $.ajax({
            url:'/like.php',
            method:'POST',
            data:form_data,

            success:function(data)
            {   
                like()
            },
            error:function(xhr, status, error)
            {
                alert("I have failed");
            }
        })
    })
});

$(document).ready(function(){

    $('.unlike_form_p').on('submit', function(event){
        event.preventDefault();
        var form_data = $(this).serialize();
        console.log(form_data);
        $.ajax({
            url:'/unlike.php',
            method:'POST',
            data:form_data,

            success:function(data)
            {
                unlike()
            },
            error:function(xhr, status, error)
            {
                alert("I have failed");
            }
        })
    })
});
</script>

我希望这可以触发一个ajax，然后使用like / unlike函数在表单上更改所有详细信息后，便可以触发另一个ajax。

但是实际上我一键触发了一个ajax，所有类似的按钮均被激活，我无法再次单击它。

有没有一种方法可以在页面上创建多个类似的表单？

0 个答案: