Question

我有一系列行，每行都有一个名称相同的单选按钮（名称=＆＃39; status＆＃39;）。我已将单选按钮放入索引中，以便每个单选按钮都能反映其正确的值。但是，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>

似乎不包含名为＆＃34; status＆＃34;的输入元素。为$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添加到选择器以匹配＆＃34; status＆＃34;名称值中的任何位置：

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

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

<小时/> 脚注：TR元素周围的DIV元素不应该存在。 DIV未列为TBODY元素的允许子元素，也未列为TR元素的允许父对象。（回答评论）

color animation属性需要一个jQuery插件，例如backgroundColor。

可以从

的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

下载整个软件包

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

1 个答案: