如何在带有参数的脚本行中分离javascript和标记

How to separate javascript and markup in case of a script line with parameters?

本文关键字：分离 javascript 脚本 参数      更新时间：2023-09-26

当脚本没有参数时，分离javascript和标记很容易。但是如何使用内联脚本行来完成呢?例子:

<td class="input-cell">
    <input type="radio" name="action-type" id="change-add" value="change-add" 
    onclick="showSelectTables('none','none','none','table','none','none')">
</td>
(....)
<script>
function showSelectTables(set1a,set1b,set1c,setSetup,set2,set3) {
    var _1a = document.getElementById('careSelector');
    _1a.style.display = set1a;
    var _1b = document.getElementById('module-I');
    _1b.style.display = set1b;
    var _1c = document.getElementById('clarificSection');
    _1c.style.display = set1c;
    var setup = document.getElementById('setup');
    setup.style.display = setSetup;
    var _2 = document.getElementById('module-II');
    _2.style.display = set2;
    var _3 = document.getElementById('module-III');
    _3.style.display = set3;
}
</script>

.

我已经尝试了我能想到的所有品种，但我得到的都是错误报告，'未定义'或浏览器的沉默处理。这可能吗?如果可能，又是怎么做到的?我会寻找一个香草javascript解决方案。

编辑:看到这里我试图实现:http://en.wikipedia.org/wiki/Unobtrusive_JavaScript，第2节。

我建议您更改HTML生成逻辑以生成以下内容:

<td class="input-cell">
    <input type="radio" name="action-type" id="change-add" value="change-add" />
</td>
<script>
// just show 2 variables for demo
var settings = { change-add : { set1a: 'some_value', set1b: 'some_value' } }
$('#change-add').click(function() {
    showSelectTables($(this).attr('id'));
});
function showSelectTables(the_id) {
    var set1a = settings[the_id]['set1']; // which returns 'some_value'
    // similar for set1b,set1c,setSetup,set2,set3
    var _1a = document.getElementById('careSelector');
    _1a.style.display = set1a;
    var _1b = document.getElementById('module-I');
    _1b.style.display = set1b;
    var _1c = document.getElementById('clarificSection');
    _1c.style.display = set1c;
    var setup = document.getElementById('setup');
    setup.style.display = setSetup;
    var _2 = document.getElementById('module-II');
    _2.style.display = set2;
    var _3 = document.getElementById('module-III');
    _3.style.display = set3;
}
</script>
重要提示:使用内联onclick并没有错，但是将JS和HTML
分开是一种更好的模式。
相关文章：