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

由于我的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，我无法修复，因为它可能有数百个，或者其他一些，我没有看到任何问题。我猜有一些方法可以使用它，但我不确定如何使用它

---

谢谢大家!

你需要改变一些事情。绑定事件的选择器仅与第一次出现的收藏夹匹配，因为id应该是唯一的。你可以通过使用一个

此外，确保在当前表单的上下文中选择每个子元素，如下所示：

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

---

你真棒！非常感谢。@user269330:不客气。此外，关于您的HTML字符串。如果在外部使用单引号，则不需要转义内部的双引号，类似于：var inputtml=$image.htmlinputHtml；使它更易于阅读/维护。我主要是从我的PHP中复制的，所以这就是为什么我这样做的原因，但我可能应该像你说的那样使用单引号。再次感谢你。