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

kse8i1jr  于 2023-06-22  发布在  jQuery
关注(0)|答案(2)|浏览(164)

我在使用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);
        }

    });
});
vc9ivgsu

vc9ivgsu1#

你不应该把html元素直接放在table中,而是需要把它们放在一些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();
y3bcpkx1

y3bcpkx12#

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开始,HTML5数据属性将被自动拉入jQuery的数据对象。

相关问题