Question

我使用PHP do-while循环构造一列表格。通常有1到8个表。在每个表中，我都有三个可单击的图像，每个图像都打开一个不同的URL。我需要将四个参数传递给URL，每个表中的其中一个（room_id）都会不同。

表格的简化形式如下：

<table>
    <tr>
        <td class="centleft">
            // Some content here
        </td>
        <td>
            <form name="PriceData" id="PriceData_<?php echo $room_id ?>">
                <input type="hidden" name="hid" id="hid" value="<?php echo $hid ?>">
                <input type="hidden" name="room_id" id="room_id" value="<?php echo $room_id ?>">
                <input type="hidden" name="ArrDate" id="ArrDate" value="<?php echo $ArrDate ?>">
                <input type="hidden" name="DepDate" id="DepDate" value="<?php echo $DepDate ?>">
            </form>
                <img src="../images/euro.png" class="eurotip bookajax">
                <img src="../images/pound.png" class="poundtip bookajax">
                <img src="../images/dollar.png" class="dollartip bookajax">
        </td>
        <td class="sr">
            // More content here
        </td>
    </tr>
</table>

<div id="prices_<?php echo $room_id ?>" style="display:none"</div>

在@daremachine的帮助下，我拥有的jQuery脚本是：

$('.eurotip').on('mouseover click', function(){
var room = $(this).closest('td').find("input[name='room_id']").val();
    $.ajax ({
        type: 'get',
        url: 'book1_ajax.php',
        data: $(this).closest('td').find('form').serialize(),
        success: function(result) {
            $("#prices_" + room).html(result).slideDown(2000);
        }
    });
});

此问题是该脚本在第一个表上不起作用，但在所有后续表上都起作用。我尝试过的任何事情都无法巧妙地解决此问题，因此我不得不通过在do-while循环上方添加一个不可见的伪表来解决此问题，因此以下所有表均能正常工作。这是一个粗略的破解，但似乎可以正常工作。

<table style="display:none"><tr><td><form></form></td></tr></table>

Answer 1

如果您需要将一个监听器调用到多个选择器，则可以用comma将它们分开。

或者使侦听器主体像独立函数一样，并在多个侦听器中调用它。

const myAjaxFnc = function() {
  ...some ajax
}

// listeners
$('#img').click(myAjaxFnc);
$('#div').click(function() {
  alert('hi');
  myAjaxFnc();
});

要解决有关ajax数据的问题，您应该将ajax中的data更改为

$(this).closest('td').find('form').serialize()

它说：：从我单击的元素开始，在DOM树的第一个TD元素中查找，然后从DOM树的第一个表单元素的下方查找。（您可以指定选择器ofc，也可以将行的td更改为tr）

这确保您的上下文仅在TD元素中，并且不能与其他表TR行或TD列混合。

使用jQuery / Ajax打开各种URL和各种参数

1 个答案: