我要检查大约十二个事件,并且所有选择器都被类似地(迭代地)命名。我怎么能缩短这个例程?
$(document).ready(function() {
$(document).on('click','#del_od1', function() {
$('#change_od1').val('YES');
$('#span_od1').html('(Deleted)');
$('#status_od1').val('DELETED');
});
$(document).on('click','#del_od2', function() {
$('#change_od2').val('YES');
$('#span_od2').html('(Deleted)');
$('#status_od2').val('DELETED');
});
$(document).on('click','#del_od3', function() {
$('#change_od3').val('YES');
$('#span_od3').html('(Deleted)');
$('#status_od3').val('DELETED');
});
});
这个问题的命名很差。有人也可以建议一个更精确的标题,我会在接受答案之前将其改为。
编辑:
响应ajax调用,回显整个表结构。表格的顶部是这样的:
$r = '
<table id="DocTable">
<tr>
<th width="170">Document Title</th>
<th width="170">MetShare FN</th>
<th width="50">Action</th>
<th width="50">Delete</th>
</tr>';
后面跟着一些不相关的行,其中包含呼叫中请求的信息。然后将其附加到前一位,整个事件以echo $r;
回显。
$rest_docs = $aProj['all_project_docs'];
$ocnt = 0;
if ($rest_docs !== ''){
$ocnt = $ocnt + 1;
$aRest_docs = explode('?',$rest_docs);
foreach($aRest_docs as $doc){
$aDoc_parts = explode('|',$doc);
$r = $r . '
<tr>
<td>'.$aDoc_parts[0].'</td>
<td>
<span id="span_od' . $ocnt . '">
<a href="'.$aDoc_parts[1].'" target="blank">
'. $aDoc_parts[1] .'
</a>
</span>
<input type="hidden" id="status_od' . $ocnt . '" name="status_od' . $ocnt . '">
</td>
<td>
<a id="change_od' . $ocnt . '" class="normal" href="#">change</a>
<input type="file" id="if_od' . $ocnt . '" name="if_od' . $ocnt . '" style="display:none">
<input type="text" style="display:none">
</td>
<td>
<a href="#" id="del_od' . $ocnt . '">delete</a>
</td>
</tr>';
}
}
echo $r;
答案 0 :(得分:3)
所有这些名字都很常见......
del_od1
change_od1
span_od1
status_od1
is: 1 :) (a number, and so for all other elements)
...所以我们需要抓住它!看:
$(document).ready(function() {
$(document).on('click','[id^=del_od]', function() {//^="starts with selector"
var num = this.id.split('od')[1]; // returns our number from the id!
// from now on we can use our var "num" :
$('#change_od'+ num).val ('YES');
$('#span_od' + num).html('(Deleted)');
$('#status_od'+ num).val ('DELETED');
});
});
答案 1 :(得分:2)
显而易见的方法是
$(document).ready(function() {
for(var i = 1; i < 10; ++i) {
$(document).on('click','#del_od' + i, (function(index) {
return function() {
$('#change_od' + index).val('YES');
$('#span_od' + index).html('(Deleted)');
$('#status_od' + index).val('DELETED');
};
})(i));
}
});
但是,如果没有这种粗野的编码风格,通过利用类而不是ID并利用有关文档结构的信息,您极有可能获得相同的效果。你能举个例子吗?
答案 2 :(得分:0)
通过解析id:
中的id后缀,您可以使用一个事件处理程序为它们提供服务$(document).ready(function() {
$(document).on('click','[id^="del_"]', function() {
var suffix = this.id.replace(/^.*?_/, "");
$('#change_' + suffix).val('YES');
$('#span_' + suffix).html('(Deleted)');
$('#status_' + suffix).val('DELETED');
});
});
这也可以通过使用删除按钮与受影响项目的HTML关系来解决。
如果您可以修改HTML以使用各种目标的类,那么只需使用按下的按钮与所需目标的关系,就可以在没有任何ID的情况下完成此操作:
<tr>
<td>'.$aDoc_parts[0].'</td>
<td>
<span id="span_od' . $ocnt . '" class="spanTarget">
<a href="'.$aDoc_parts[1].'" target="blank">
'. $aDoc_parts[1] .'
</a>
</span>
<input type="hidden" id="status_od' . $ocnt . '" class="statusTarget" name="status_od' . $ocnt . '">
</td>
<td>
<a id="change_od' . $ocnt . '" class="changeTarget normal" href="#">change</a>
<input type="file" id="if_od' . $ocnt . '" name="if_od' . $ocnt . '" style="display:none">
<input type="text" style="display:none">
</td>
<td>
<a href="#" id="del_od' class="deleteButton" . $ocnt . '">delete</a>
</td>
</tr>';
而且,这将是仅基于位置和类(无ids)的脚本:
$(document).ready(function() {
$(document).on('click', '.deleteButton', function() {
var parent = $(this).closest("tr");
parent.find('.changeTarget').val('YES');
parent.find('.spanTarget').html('(Deleted)');
parent.find('.statusTarget').val('DELETED');
});
});
这将获取所单击的删除按钮所在的行,然后查找同一行中的更改,范围和状态对象并对其进行操作。根本没有使用任何ID。这使用单击按钮的位置来查找它所操作的对象。