将单选按钮放入索引后，Javascript 无法工作

Question

我有一个行数组，每行都有一个具有相同名称的单选按钮(name='status')。我已将单选按钮放入索引中，以便每个单选按钮都会反射(reflect)其正确的值。但是，javascript 不再可以更改该值 - 我对需要对 javascript 进行的相应更改感到困惑。

<form action="<?php echo $this->form_action; ?>" method="post">
    <p class="hide"><input name="status" type="text" value="" /></p>
    <table id="manage-items" cellpadding="0" cellspacing="0" border="0">
        <thead>
            <tr>
                <th><?php echo $this->translate('Item');?></th>
                <th><th><?php echo $this->translate('Status');?></th></th>
            </tr>
        </thead>

        <tbody>
            <?php $ind = 0; ?>
            <?php foreach ($this->items as $item) {
                $item_link = 'type=product';
                ?>
                    <tr id="item_<?php echo $ind; ?>">
                        <td data-label="Title"><span class="orangelink"><?php echo $item->title; ?></span></td>
                        <td align="left" style="padding-left:22px" class="color-status-<?php echo $item['active']; ?>">
                            <?php if (in_array($item['active'], array(0, 1))) { ?>
                                <input type="radio" name="item[<?php echo $ind; ?>][status]" value="1" <?php if ($item['active'] == 1) echo 'checked'; ?>>Active
                                <br>
                                <input type="radio" name="item[<?php echo $ind; ?>][status]" value="0" <?php if ($item['active'] == 0) echo 'checked'; ?>>Inactive
                            <?php } else { ?>
                                <?php echo $item['active']; ?>
                            <?php } ?>
                        </td>
                    </tr>
                <?php $ind++; ?>
            <?php } ?>
        </tbody>
    </table>
</form>


<script type="text/javascript">
    //console.log(jQuery)
    head.ready('jquery', function () {
        $(document).ready(function () {

            $('input[name="radio"]').click(function () {
                var status = this.value;
                var id = $(this).parents('tr').attr('id');
                console.log('here now')
                $.ajax({
                    type: 'post',
                    url: "?module=items&controller=block&action=modDaStatusBro",
                    data: 'id=' + id + '&status=' + status,
                    beforeSend: function () {
                        $('#' + id).animate({
                            'backgroundColor': '#FFBFBF'
                        }, 400);
                    },
                    success: function (result) {
                        if (result == 'ok') {
                            $.get(window.location.href, function (data) {
                                $('#' + id).html($(data).find('#' + id).html());
                                setTimeout(function () {
                                    $("#" + id + "").animate({'backgroundColor': 'transparent'}, 400).find('.tooltip').simpletooltip();
                                    deletePage();
                                }, 500);
                            });
                        } else {
                            alert(result);
                            $("#" + id + "").animate({'backgroundColor': 'transparent'}, 400);
                        }
                    }
                });
            });
        });
    });

</script>

Answer 1

在 PHP 中生成的表格数据元素之间

 <tr id="<?php echo $item['id']; ?>">
 ....
 </tr>     

似乎不包含名为“status”的输入元素。为 $ind 的每个值生成的 HTML 预计为

        <input type="radio" name="item[n][status]"  .... Active
        <input type="radio" name="item[n][status]"  .... Inactive

其中 n 是 $ind 的值。但是选择器在

        $('input[name="status"]').click(function () {

与名称格式不匹配。一键解决方案是添加 * wild card到选择器以匹配名称值中任意位置的“status”:

        $('input[name*="status"]').click(function () {

还存在其他可能性，例如向每个受影响的单选按钮添加特殊的类名称(不推荐)，或者向每个由查询选择器找到的单选输入添加特殊的数据属性(可行)。

<小时/>脚注:TR 元素周围的 DIV 元素不应该出现。 DIV 未列为 TBODY 的允许子元素元素，也不是 TR 的允许父对象元素。<小时/>(回复评论)

color animation 需要 jQuery 插件属性，例如背景颜色。

可以从 CDN 下载代码:

https://code.jquery.com/color/jquery.color-2.1.2.min.js ，或
https://cdnjs.cloudflare.com/ajax/libs/jquery-color/2.1.2/jquery.color.min.js

或者可以从GitHub下载整个包