Question

可能这个问题非常愚蠢，但我已经尝试解决了几天但仍然无法完成。 无论谁能解决这个问题，请指定价格并给我paypal，钱给你 :)。基本上，我想在一系列div中添加一个愿望清单按钮，id =“imgforplaces_thumbnail “（参见我的php函数），php函数中的while循环将生成一些div”imgforplaces_thumbnail“，即12.我试过var_dump（$ row ['id']）;对于while循环中的每个不同的项目，他们已经显示了1,2,3,4,5,6等基本上添加到愿望列表按钮，class =“addbutton”，“deletebutton”，当我点击它时，将执行ajax调用，Addtobucketlist（）或Deletefrombucketlist（）（参见标题）。根据checkifadded（）的状态，它将显示或隐藏类“addbutton”或“deletebutton”。现在我的问题是，当我执行代码时，当我点击第一个检查按钮时，它只是运行最后一个检查按钮功能！即。 $行[ 'ID'] = 6。

值得注意的一件事是，如果我不使用多个div，它就像魔法一样！但是当有多个div“imgforplaces_thumbnail”

时却没有

您可以在此处查看演示：http://utourpia.me/php/dreamtrip.php

这是我的标题：

    $(document).ready(function(){

    $('.addBucket').submit(function(e) {
            Addtobucketlist();
            e.preventDefault(); 
        }); 
    });
    $(document).ready(function(){

        $('.deleteBucket').submit(function(e) {
            Deletefrombucketlist();
            e.preventDefault(); 
        }); 
    });

我会做一个ajax电话：

function Addtobucketlist()
{
    hideshow('loading',1);
    error(0);
    $.ajax({
    type: "POST",
    url: "http://utourpia.me/php/addtobucketlist.php",      
    data: $('.addBucket').serialize(),
    dataType: "json",
    success: function(msg){

        if(parseInt(msg.status)==1)
        {
            if ($('.addbutton').is(":visible")){
            //hide the form
            $('.addbutton').fadeOut(1);                 
            //show the success message
            $('.deletebutton').fadeIn(1);
            }
            else {
            //hide the form
            $('.addbutton').fadeIn(1);                  
            //show the success message
            $('.deletebutton').fadeOut(1);
            }
        }
        else if(parseInt(msg.status)==0)
        {
            error(1,msg.txt);
        }

        hideshow('loading',0);
    }
});

}

function Deletefrombucketlist()
{
    hideshow('loading',1);
    error(0);
    $.ajax({
    type: "POST",
    url: "http://utourpia.me/php/deletefrombucketlist.php",     
    data: $('.deleteBucket').serialize(),
    dataType: "json",
    success: function(msg){

        if(parseInt(msg.status)==1)
        {
            if ($('.addbutton').is(":visible")){
            //hide the form
            $('.addbutton').fadeOut(1);                 
            //show the success message
            $('.deletebutton').fadeIn(1);
            }
            else {
            //hide the form
            $('.addbutton').fadeIn(1);                  
            //show the success message
            $('.deletebutton').fadeOut(1);
            }
        }
        else if(parseInt(msg.status)==0)
        {
            error(1,msg.txt);
        }

        hideshow('loading',0);
    }
});

}

这是我的php函数：

$result = mysql_query("select SQL_CALC_FOUND_ROWS * from places order by id asc limit 12");

 while ($row = mysql_fetch_array($result)) {
        echo '<div id=imgforplaces_thumbnail>';

$location_id = $row['id'];

if (check_if_added($users_id, $location_id) == "yes")
{ 
echo '<div class=addbutton>';
echo '<form class=deleteBucket action="http://utourpia.me/php/deletefrombucketlist.php" method=post>';
echo '<input type="hidden" name="Delete1" value='.$location_id.' />';
echo '<input type="image" src="../images/checked.png" name="Delete" value="delete"><img id=loading src="http://utourpia.me/images/loading.gif" alt="working.." />';
echo '</form>';
echo '</div>';
echo '<div class="deletebutton">';
echo '<form class=addBucket action="http://utourpia.me/php/addtobucketlist.php" method=post>';
echo '<input type="hidden" name="Add1" value='.$location_id.' />';
echo '<input type="image" src="../images/haventchecked.png" name="Add" value="add"><img id=loading src="http://utourpia.me/images/loading.gif" alt="working.." />';
echo '</form>';
echo '</div>';
}
else if (check_if_added($users_id, $location_id) == "no")
{
echo '<div class=addbutton>';
echo '<form class=addBucket action="http://utourpia.me/php/addtobucketlist.php" method=post>';
echo '<input type="hidden" name="Add1" value='.$location_id.' />';
echo '<input type="image" src="../images/haventchecked.png" name="Add" value="add"><img id=loading src="http://utourpia.me/images/loading.gif" alt="working.." />';
echo '</form>';
echo '</div>';
echo '<div class="deletebutton">';
echo '<form class=deleteBucket action="http://utourpia.me/php/deletefrombucketlist.php" method=post>';
echo '<input type="hidden" name="Delete1" value='.$location_id.' />';
echo '<input type="image" src="../images/checked.png" name="Delete" value="delete"><img id=loading src="http://utourpia.me/images/loading.gif" alt="working.." />';
echo '</form>';
echo '</div>';
}   
    echo '</div>'; //end div imgforplaces_thumbnail 

            echo '<br />';
        }

Answer 1

您的示例页面和问题需要注意以下几点：

$（document）.ready只需在您的页面上使用一次。你有好几次。
ID必须是唯一的。
您无需在表单中包装添加和删除图像。只需为每个添加一个类或唯一ID，然后添加一个click事件，而不是提交表单。或者，如果要保留表单，请立即调用e.preventDefault（）以在执行操作之前阻止表单提交。但是，您似乎想要异步执行这些操作，在这种情况下，您应该删除表单并在执行AJAX请求的每个图像上放置一个click事件。
如果您的DOM元素是在document.ready之后创建的，请考虑使用live而不是点击。

Ajax不适用于多个div

1 个答案: