1

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

查询

$(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 次哈)

感谢您花时间阅读

4

3 回答 3

2

您在选择器中使用了 ID:

$("#clickme")

ID 是唯一的,jQuery 只会获取该特定 ID 的第一个实例,而不是全部。

你只需要稍微改变你的循环来使用类:

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

然后在选择器中使用类:

$(".clickme")

继续前进on()而不是delegate()

$("#insert").on("click", ".clickme", function(){ ... }
于 2012-12-05T19:59:39.797 回答
2

一个问题是您需要存储这两个 ID,以便它们可以通过 AJAX 调用传递到您的服务器。一种方法是使用 jquery 的data()命令,它允许您读取/写入绑定到特定 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/

于 2012-12-05T20:46:11.050 回答
0

最重要的是,修复 HTML 生成,并为重复的相似元素使用类,为唯一元素使用 ID。

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

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

虽然你可以想出一些 hacky 选择器 - 可能在输入元素或其他东西上循环,例如$(this).find('input')然后循环,假设第一个是 ruid,第二个是 propid。这是一个黑客,充其量是脆弱的 - 如果 HTML 顺序发生变化,一切都会中断。

修复 HTML,然后您就可以使用正确的选择器(可能$(this).find('.ruid')或类似的东西)

于 2012-12-05T20:10:02.180 回答