我有一个行数组,每个行都有一个同名的单选按钮( name ='status')。我已将单选按钮放入索引中,以便每个单选按钮都能反映其正确的值。然而,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>
发布于 2016-11-28 21:30:11
在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”:
$('input[name*="status"]').click(function () {
还存在其他的可能性,例如为每个受影响的单选按钮添加一个特殊的类名(不推荐),或者为每个要由查询选择器找到的单选输入添加一个特殊的数据属性(可行)。
脚注: TR元素周围的DIV元素不应该在那里。TR既不作为TBODY元素的允许的子元素列出,也不作为DIV元素的允许的父对象列出。
(回复评论)
属性的color animation需要一个jQuery插件,例如backgroundColor
。
代码可从CDNs下载,网址为
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下载整个包
https://stackoverflow.com/questions/40836649
复制