Question

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

THE JQUERY

$(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：

$("#clickme")

ID是唯一的，jQuery只会获得该特定ID的第一个内容，而不是所有ID。

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

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

然后在选择器中使用该类：

$(".clickme")

继续on()代替delegate()

也是个好主意

$("#insert").on("click", ".clickme", function(){ ... }

Answer 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/

Answer 3

底线，修复HTML生成，并为重复的，类似的元素和唯一元素的ID使用类。

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

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

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

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

Jquery函数仅执行第一项

3 个答案: