Question

由于我的PHP回显内容，我多次重复相同的代码，我想分别与每个div进行交互。我很难解释，但这里是重复两次代码的例子。希望它完全代表我实际拥有的......

<form id="favorite"><div id="images"><input type="submit" style="background-image: url(grey.png);" onclick="submit" value="" /></div></form>
<form id="favorite"><div id="images"><input type="submit" style="background-image: url(grey.png);" onclick="submit" value="" /></div></form>

的javascript：

$('#favorite').submit(function() {
    var url = document.URL; 
    if(document.getElementById("images").innerHTML.indexOf("grey") != -1) {
    $.ajax({
           type: "POST",
           url: url,
           data: $("#favorite").serialize(), 
           success: function(data)
           {
               $('#images').html("<input type=\"submit\" style=\"background-image: url(red.png);\" onclick=\"submit\" value=\"\" />"); 
           }
         });
    } else {
        $.ajax({
           type: "POST",
           url: url,
           data: $("#favorite").serialize(),
           success: function(data)
           {
               $('#images').html("<input type=\"submit\" style=\"background-image: url(grey.png);\" onclick=\"submit\" value=\"\" />"); 
           }
         });
    }
    return false; 
});

所以，如果我点击顶部表格的图像，它就完美无缺。它将运行PHP，它将更改图像而不刷新。如果我单击底部图像，它将运行PHP，但它将刷新页面，它不会更改图像。所以，如果我点击底部，它似乎不喜欢Javascript。我不知道是不是因为它正在查看这两种形式，因为它们具有相同的ID（我无法修复，因为它可能有数百种），或其他什么，我没有看到任何问题。我猜有一些方法可以使用“this”，但我不确定如何使用它。

谢谢！

Answer 1

你需要改变一些事情。绑定事件的选择器仅匹配第一次出现的#favourite，因为id应该是唯一的。你可以使用attribute equals selector来解决这个问题。

此外，请确保在当前表单的上下文中选择每个子元素，类似于：

$('[id=favorite]').submit(function () {
    var $form = $(this);                 // the current form
    var $image = $('#images', $form)     // get images element in the context of current form
    var url = document.URL;

    if ($image.html().indexOf("grey") != -1) {
        $.ajax({
            type: "POST",
            url: url,
            data: $form.serialize(),     // use current form, don't re-select
            success: function (data) {
                $image.html("<input type=\"submit\" style=\"background-image: url(red.png);\" onclick=\"submit\" value=\"\" />");
            }
        });
    } else {
        $.ajax({
            type: "POST",
            url: url,
            data: $form.serialize(),     // use current form, don't re-select
            success: function (data) {
                $image.html("<input type=\"submit\" style=\"background-image: url(grey.png);\" onclick=\"submit\" value=\"\" />");
            }
        });
    }
    return false;
});

检查各个div的文本并更改内容

1 个答案: