Question

我在使用parent（）从两个输入框中检索值时遇到问题。和next（）函数。。在我脑海里，这应该工作！任何人都能看到我错过的东西吗？

感谢。

我有 HTML

<tr>
<td class='headline2' style="width: 200px; padding-bottom: 20px; padding-top:20px; padding-left: 10px; text-align: left;"><?= $value['f_name'] . " " . $value['l_name']; </td>
<td class='headline2'><?= $value[0]->end ?><br><?= $value[0]->start ?></td>
<td class='headline2'style='padding-right:18px;'><?= $value[0]->updated ?></td>
<td><div class="approve"><input disabled  <? if ($value[0]->studentApproved == 1) { ?>checked<? } ?>  type="checkbox"><label><span></span></label></div></td>
<td><div class="approve"><input disabled  <? if ($value[0]->companyApproved == 1) { ?>checked<? } ?>  type="checkbox"><label><span></span></label></div></td>
<td><div class="approve"><input class="approveME" value="<?= $value[0]->application_id ?>"   <? if ($value[0]->koordinatorApproved == 1) { ?>checked<? } ?>  id="<?= $i ?>" type="checkbox"><label for="<?= $i ?>" ><span></span></label></div></td>
<td><input class="deleteME "type="image" src="../wp-content/themes/tutorial_theme/images/DELETE.png"><td>
</tr> 
<input class="hidden" value="<?= $value[1] ?>">
<input class="hidden" value="<?= $value[0]->user_id ?>">

这 JQUERY

 $('.content').on('click', '.deleteME', function() {
    var class_id = $(this).parent().parent().next().val();
    var user_id = $(this).parent().parent().next().next().val();

    $.ajax({
        type: "POST",
        url: (my_ajax_script.ajaxurl),
        data: ({action: 'delete_student_from_class', class_id: class_id, student_id: user_id}),
        success: function(msg) {
            alert("data something" + msg);
        }

    });
});

Answer 1

你不应该在表格中直接使用html元素，而是需要将它们放在某个td中。应该更改html。您可以在.deleteME之后的新td中的同一行中添加隐藏字段。

HTML

tr>
<td class='headline2' style="width: 200px; padding-bottom: 20px; padding-top:20px; padding-left: 10px; text-align: left;"><?= $value['f_name'] . " " . $value['l_name']; </td>
<td class='headline2'><?= $value[0]->end ?><br><?= $value[0]->start ?></td>
<td class='headline2'style='padding-right:18px;'><?= $value[0]->updated ?></td>
<td><div class="approve"><input disabled  <? if ($value[0]->studentApproved == 1) { ?>checked<? } ?>  type="checkbox"><label><span></span></label></div></td>
<td><div class="approve"><input disabled  <? if ($value[0]->companyApproved == 1) { ?>checked<? } ?>  type="checkbox"><label><span></span></label></div></td>
<td><div class="approve"><input class="approveME" value="<?= $value[0]->application_id ?>"   <? if ($value[0]->koordinatorApproved == 1) { ?>checked<? } ?>  id="<?= $i ?>" type="checkbox"><label for="<?= $i ?>" ><span></span></label></div></td>
<td><input class="deleteME "type="image" src="../wp-content/themes/tutorial_theme/images/DELETE.png"><td>
<td>
<input class="hidden" value="<?= $value[1] ?>">
<input class="hidden" value="<?= $value[0]->user_id ?>">
</td>
</tr>

的Javascript

var class_id = $(this).closest('tr').find('.hidden:eq(0)').val();
var user_id =  $(this).closest('tr').find('.hidden:eq(1)').val();

或者

var class_id = $(this).parent().next('td').find('.hidden:eq(0)').val();
var user_id =  $(this).parent().next('td').find('.hidden:eq(1)').val();

Answer 2

parent()会让人感到困惑，当你的DOM发生变化时，它会破坏你的代码。

也许你可以尝试这样的事情：

<强> HTML

<tr>
<td class='headline2' style="width: 200px; padding-bottom: 20px; padding-top:20px; padding-left: 10px; text-align: left;"><?= $value['f_name'] . " " . $value['l_name']; </td>
<td class='headline2'><?= $value[0]->end ?><br><?= $value[0]->start ?></td>
<td class='headline2'style='padding-right:18px;'><?= $value[0]->updated ?></td>
<td><div class="approve"><input disabled  <? if ($value[0]->studentApproved == 1) { ?>checked<? } ?>  type="checkbox"><label><span></span></label></div></td>
<td><div class="approve"><input disabled  <? if ($value[0]->companyApproved == 1) { ?>checked<? } ?>  type="checkbox"><label><span></span></label></div></td>
<td><div class="approve"><input class="approveME" value="<?= $value[0]->application_id ?>"   <? if ($value[0]->koordinatorApproved == 1) { ?>checked<? } ?>  id="<?= $i ?>" type="checkbox"><label for="<?= $i ?>" ><span></span></label></div></td>
<td><input class="deleteME data-class="<?= $value[1] ?>" data-user="<?= $value[0]->user_id ?>" "type="image" src="../wp-content/themes/tutorial_theme/images/DELETE.png"><td>
</tr>

<强> JS

$('.content').on('click', '.deleteME', function() {
    var class_id = $(this).data('class');
    var user_id = $(this).data('user');

    $.ajax({
        type: "POST",
        url: (my_ajax_script.ajaxurl),
        data: ({action: 'delete_student_from_class', class_id: class_id, student_id: user_id}),
        success: function(msg) {
            alert("data something" + msg);
        }

    });
});

参考：jQuery .data()

从jQuery 1.4.3开始，HTML 5数据属性将自动引入jQuery的数据对象。

在Jquery中使用next和parent获取隐藏的输入

2 个答案: