php - Jquery 函数只执行第一项

Question

我想知道是否有人可以帮助我。我对 jQuery 很陌生，但喜欢学习它。我似乎有一个小问题，我想知道是否有人可以帮助我。我正在使用以下 jQuery 将用户 ID 和属性 ID 添加到 MySQL(如“添加到收藏夹”)该函数在第一个属性上执行良好，但在它下面的另一个属性上执行不正常。

J查询

$(document).ready(function(){
$("#clickme").delegate("#insert", "click", function(){

var ruid=$("#ruid").val();
var propid=$("#propid").val();


$.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;
});
});
</script>

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 的隐藏类型(在循环中)，大禁忌但不知道是谁更改代码以访问 id=name+ID 或使用 Class= 或 Name = 相反。

如果有人能帮助我，我将非常感激(谷歌搜索了数小时尝试不同的东西并打破了它 4 次哈哈)

感谢您花时间阅读

Answer 1

一个问题是您需要存储这两个 ID，以便它们可以通过 AJAX 调用传递到您的服务器。一种方法是使用 jquery 的 data()命令，它允许您读取/写入绑定(bind)到特定 HTML 元素的键值数据。在这种情况下，您可以将两个 ID 直接存储在 <a>...</a> 中。元素。

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

您需要解决的另一个问题是如何拥有任意数量的这些“保存到收藏夹”链接，而不必对它们全部进行唯一命名。这是通过使用类和 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>

示例 javascript:

$(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;
    });
});

本例的 jsfiddle:http://jsfiddle.net/wQjhN/7/