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

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

您需要更改一些内容。用于绑定(bind)事件的选择器仅与第一次出现的 #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;
});