Php Jquery函数仅执行第一项

我想知道是否有人能帮我。我对jQuery很陌生，但喜欢学习它。我似乎有个小问题，不知有没有人能帮我解决。我使用下面的jQuery将用户ID和属性ID添加到MySQL中（就像“添加到收藏夹”），该函数在第一个属性上运行良好，但在其下的另一个属性上运行良好

JQUERY

$（文档）.ready（函数（）{
$（“#单击我”）。委托（“#插入”，“单击”，函数（）{
var ruid=$（“#ruid”）.val（）；
var propid=$（“#propid”）.val（）；
$.post（'inc.saveprop.php'，{ruid:ruid，propid:propid}，
功能（数据）{
$（“#消息”）.html（数据）；
$（“#消息”）.hide（）；
$（“#message”）.fadeIn（1500）；//淡入insert.php文件给出的数据
});
返回false；
});
});

html：下面是一个循环

<? while { 
<input id=\"ruid\" type=\"hidden\" value=\"".$uid."\" />
<input id=\"propid\"  type=\"hidden\" value=\"".$props['propid']."\" />
<a class=\"insert\" title=\"Insert Data\" href=\"#\">Save to Favourites</a>
 <!-- For displaying a message -->

<div id=\"message\"></div>";
} etc  ?>

---

您正在选择器中使用ID：

$("#clickme")

ID是唯一的，jQuery将只获取该特定ID的第一个值，而不是所有ID

您只需稍微更改循环即可使用类：

<input class=\"ruid\" type=\"hidden\" value=\"".$uid."\" />

最好转到
on（）
而不是
delegate（）

您正在选择器中使用ID：

$("#clickme")

ID是唯一的，jQuery将只获取该特定ID的第一个值，而不是所有ID

您只需稍微更改循环即可使用类：

<input class=\"ruid\" type=\"hidden\" value=\"".$uid."\" />

最好转到
on（）
而不是
delegate（）

总之，修复HTML生成，并对重复的、类似的元素使用类，对唯一的元素使用ID

单击处理程序不会附加到具有相同ID的多个项目，因为它只希望找到一个

您可以使用@adeneo的修复程序来解决这个问题，但是您的ruid和propid也会遇到类似的问题，并且无法正确读取这些值-当您使用ID而不是类时，您将再次在页面上获得ruid和propid的第一个实例

虽然你可以想出一些黑客选择器——可能是在输入元素上循环或其他什么，例如，
$（this）。找到（'input'）
，然后循环，假设第一个是ruid，第二个是propid。这是一个黑客，最多也很脆弱——如果HTML顺序改变，一切都会中断

修复HTML，然后您将能够使用适当的选择器（可能是
$（this）。查找（'.ruid'）
或类似的内容）
底线，修复HTML生成，并对重复的、类似的元素使用类，对唯一的元素使用ID

单击处理程序不会附加到具有相同ID的多个项目，因为它只希望找到一个

您可以使用@adeneo的修复程序来解决这个问题，但是您的ruid和propid也会遇到类似的问题，并且无法正确读取这些值-当您使用ID而不是类时，您将再次在页面上获得ruid和propid的第一个实例

虽然你可以想出一些黑客选择器——可能是在输入元素上循环或其他什么，例如，
$（this）。找到（'input'）
，然后循环，假设第一个是ruid，第二个是propid。这是一个黑客，最多也很脆弱——如果HTML顺序改变，一切都会中断

修复HTML，然后您将能够使用适当的选择器（可能是
$（this）。查找（'.ruid'）
或类似的内容）
一个问题是，您需要存储两个ID，以便通过AJAX调用将它们传递给服务器。一种方法是使用jquery命令，该命令允许您读取/写入绑定到特定HTML元素的键值数据。在这种情况下，您可以将两个ID直接存储在


您需要解决的另一个问题是如何拥有任意数量的这些“保存到收藏夹”链接，而不必对它们进行唯一命名。这是通过使用类和jquery类选择器实现的

示例HTML:

<div class='clickme'>
    <a class="insert" title="Insert Data" data-ruid="ruid1" data-propid="propid1" href="#">Save to Favourites</a>
    <div class="message"></div>
</div>

<div class='clickme'>
    <a class="insert" title="Insert Data" data-ruid="ruid2" data-propid="propid2" href="#">Save to Favourites</a>
    <div class="message"></div>
</div>

<div class='clickme'>
    <a class="insert" title="Insert Data" data-ruid="ruid3" data-propid="propid3" href="#">Save to Favourites</a>
    <div class="message"></div>
</div>

$(document).ready(function(){
    $(".clickme").delegate(".insert", "click", function(){
        // the 'this' variable refers to whatever was clicked, in this case 
        // it is the <a> ... </a> element with the class 'insert'

        // use the jquery data() command to retrieve the saved IDs         
        var ruid=$(this).data('ruid');
        var propid=$(this).data('propid');

        var data = "ruid: " + ruid + " propid: " +  propid;

        // find the sibling of the <a> ... </a> element that has the class 'message'
        // and update it with the retrieved information
        var message = $(this).siblings(".message");

        message.html(data);
        message.hide();
        message.fadeIn(1500);

        //$.post('inc.saveprop.php', {ruid: ruid, propid: propid}, function(data){
        //    $("#message").html(data);
        //    $("#message").hide();
        //    $("#message").fadeIn(1500); //Fade in the data given by the insert.php file
        //});

        return false;
    });
});



示例javascript:

<div class='clickme'>
    <a class="insert" title="Insert Data" data-ruid="ruid1" data-propid="propid1" href="#">Save to Favourites</a>
    <div class="message"></div>
</div>

<div class='clickme'>
    <a class="insert" title="Insert Data" data-ruid="ruid2" data-propid="propid2" href="#">Save to Favourites</a>
    <div class="message"></div>
</div>

<div class='clickme'>
    <a class="insert" title="Insert Data" data-ruid="ruid3" data-propid="propid3" href="#">Save to Favourites</a>
    <div class="message"></div>
</div>

$(document).ready(function(){
    $(".clickme").delegate(".insert", "click", function(){
        // the 'this' variable refers to whatever was clicked, in this case 
        // it is the <a> ... </a> element with the class 'insert'

        // use the jquery data() command to retrieve the saved IDs         
        var ruid=$(this).data('ruid');
        var propid=$(this).data('propid');

        var data = "ruid: " + ruid + " propid: " +  propid;

        // find the sibling of the <a> ... </a> element that has the class 'message'
        // and update it with the retrieved information
        var message = $(this).siblings(".message");

        message.html(data);
        message.hide();
        message.fadeIn(1500);

        //$.post('inc.saveprop.php', {ruid: ruid, propid: propid}, function(data){
        //    $("#message").html(data);
        //    $("#message").hide();
        //    $("#message").fadeIn(1500); //Fade in the data given by the insert.php file
        //});

        return false;
    });
});

$（文档）.ready（函数（）{
$（“.clickme”）.delegate（“.insert”，“click”，“function（））{
//在本例中，“this”变量引用单击的任何内容
//一个问题是，您需要存储这两个ID，以便通过AJAX调用将它们传递给服务器。一种方法是使用jquery命令，它允许您读取/写入绑定到特定HTML元素的键值数据。在这种情况下，您可以将这两个ID直接存储在


您需要解决的另一个问题是如何拥有任意数量的这些“保存到收藏夹”链接，而不必对它们进行唯一命名。这是通过使用类和jquery类选择器实现的

示例HTML:

<div class='clickme'>
    <a class="insert" title="Insert Data" data-ruid="ruid1" data-propid="propid1" href="#">Save to Favourites</a>
    <div class="message"></div>
</div>

<div class='clickme'>
    <a class="insert" title="Insert Data" data-ruid="ruid2" data-propid="propid2" href="#">Save to Favourites</a>
    <div class="message"></div>
</div>

<div class='clickme'>
    <a class="insert" title="Insert Data" data-ruid="ruid3" data-propid="propid3" href="#">Save to Favourites</a>
    <div class="message"></div>
</div>

$(document).ready(function(){
    $(".clickme").delegate(".insert", "click", function(){
        // the 'this' variable refers to whatever was clicked, in this case 
        // it is the <a> ... </a> element with the class 'insert'

        // use the jquery data() command to retrieve the saved IDs         
        var ruid=$(this).data('ruid');
        var propid=$(this).data('propid');

        var data = "ruid: " + ruid + " propid: " +  propid;

        // find the sibling of the <a> ... </a> element that has the class 'message'
        // and update it with the retrieved information
        var message = $(this).siblings(".message");

        message.html(data);
        message.hide();
        message.fadeIn(1500);

        //$.post('inc.saveprop.php', {ruid: ruid, propid: propid}, function(data){
        //    $("#message").html(data);
        //    $("#message").hide();
        //    $("#message").fadeIn(1500); //Fade in the data given by the insert.php file
        //});

        return false;
    });
});



示例javascript:

<div class='clickme'>
    <a class="insert" title="Insert Data" data-ruid="ruid1" data-propid="propid1" href="#">Save to Favourites</a>
    <div class="message"></div>
</div>

<div class='clickme'>
    <a class="insert" title="Insert Data" data-ruid="ruid2" data-propid="propid2" href="#">Save to Favourites</a>
    <div class="message"></div>
</div>

<div class='clickme'>
    <a class="insert" title="Insert Data" data-ruid="ruid3" data-propid="propid3" href="#">Save to Favourites</a>
    <div class="message"></div>
</div>

$(document).ready(function(){
    $(".clickme").delegate(".insert", "click", function(){
        // the 'this' variable refers to whatever was clicked, in this case 
        // it is the <a> ... </a> element with the class 'insert'

        // use the jquery data() command to retrieve the saved IDs         
        var ruid=$(this).data('ruid');
        var propid=$(this).data('propid');

        var data = "ruid: " + ruid + " propid: " +  propid;

        // find the sibling of the <a> ... </a> element that has the class 'message'
        // and update it with the retrieved information
        var message = $(this).siblings(".message");

        message.html(data);
        message.hide();
        message.fadeIn(1500);

        //$.post('inc.saveprop.php', {ruid: ruid, propid: propid}, function(data){
        //    $("#message").html(data);
        //    $("#message").hide();
        //    $("#message").fadeIn(1500); //Fade in the data given by the insert.php file
        //});

        return false;
    });
});

$（文档）.ready（函数（）{
$（“.clickme”）.delegate（“.insert”，“click”，“function（））{
//在本例中，“this”变量引用单击的任何内容
//这很好，不过如果你打算使用HTML5，你最好使用不带参数的.data（），并将数据字段作为对象获取-比多次调用快一点，而且你不必构建要提交的数据字符串（从OP的代码中丢失了提交部分）哇。一个非常全面的答案。我现在几乎都等不及早上去尝试了。希望这就是我想要的！！！感谢你花这么多时间来帮助我！今天早上我迫不及待地想尝试一下！你是一个超级明星！！！！这在第一次尝试时就起了作用-我真是太感谢你了！！！！！！！！！哇哦！如果你要去的话，很好ML5，您还可以使用不带参数的.data（），并将数据字段作为对象获取-比多次调用快一点，并且您不必构建要提交的数据字符串（您从OP的代码中丢失了提交部分）哇。非常简单