javascript - 组合执行相同类型操作的函数

Question

我有两个函数，它们执行几乎相同的任务，但在不同的元素上。我只以为我会有两个，但现在我计划添加更多，所以我注意到会有很多冗余。我可以做些什么来改进我的 jQuery？

$('input#activity-view').change(function() {
    if (this.checked) {
        $('.action-view').show();
    } else {
        $('.action-view').hide();
    }
});

$('input#activity-upload').change(function() {
    if (this.checked) {
        $('.action-upload').show();
    } else {
        $('.action-upload').hide();
    }
});

HTML 是这样的:

<input type="checkbox" id="activity-view"> View<br />
<input type="checkbox" id="activity-upload"> Upload<br />
<br />
<div class="action-upload">test</div>
<div class="action-upload">abc</div>
<div class="action-view">kk</div>
<div class="action-upload">yes</div>

jsFiddle http://jsfiddle.net/rLs82of1/

Answer 1

$(':checkbox[id^="activity-"]').on('change', function() {
  var sel = '.action-' + this.id.split('-').pop();
  $(sel)[ this.checked ? 'show' : 'hide' ]();
})
.change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="activity-view"> View<br />
<input type="checkbox" id="activity-upload"> Upload<br />
<br />
<div class="action-upload">test</div>
<div class="action-upload">abc</div>
<div class="action-view">kk</div>
<div class="action-upload">yes</div>