显示/隐藏一系列文本框的更好方法

Question

我正在使用一个变量来跟踪用户单击复选框时将出现的文本框。有一系列 4 个复选框，无论用户首先单击哪个复选框，都会出现一个复选框。我在这里提供的解决方案可以正常工作并且完全按照我的意愿进行，但我想知道是否有更好的方法可以使用 jQuery 来做到这一点。

<input name="purposeOfFees" type="checkbox" value="New" class="radio expendable1" />Expendable materials1
<br />
<input name="purposeOfFees" type="checkbox" value="New" class="radio expendable2" />Expendable materials2
<br />
<input name="purposeOfFees" type="checkbox" value="New" class="radio expendable3" />Expendable materials3
<br />
<input name="purposeOfFees" type="checkbox" value="New" class="radio expendable4" />Expendable materials4
<br />
<br />
<p class="text purposeOfFeesText">For each check box above give a detailed description of the expenditures.</p>
<p>
    <textarea rows="" cols="" class="textarea expendable1 purposeOfFeesText" name="RITextArea"></textarea>
</p>
<p>
    <textarea rows="" cols="" class="textarea expendable2 purposeOfFeesText" name="RITextArea"></textarea>
</p>
<p>
    <textarea rows="" cols="" class="textarea expendable3 purposeOfFeesText" name="RITextArea"></textarea>
</p>
<p>
    <textarea rows="" cols="" class="textarea expendable4 purposeOfFeesText" name="RITextArea"></textarea>
</p>

这里是 jQuery：

var textboxCounter = 0;
$('.purposeOfFeesText').hide();

$('.radio.expendable1, .radio.expendable2, .radio.expendable3, .radio.expendable4').click(function () {
    if ($(this).is(':checked')) {
        textboxCounter += 1;
        $('.textarea.expendable' + textboxCounter).show(500);
        if (textboxCounter == 1) { $('.text.purposeOfFeesText').show();
                                 } 
    } else {
        $('.textarea.expendable' + textboxCounter).hide();
        $('.textarea.expendable' + textboxCounter).prop('value', '');
        textboxCounter -= 1;
        if (textboxCounter < 1) { $('.text.purposeOfFeesText').hide();
                                }
    }
});

这是一个 jsFiddle：http://jsfiddle.net/L7ydk/

就像我说的那样，这个解决方案正按我的意愿为我工作，但我想知道是否有任何功能或其他方式可以让我组织这个更有效或更符合良好编程实践。欢迎提出任何建议，并感谢您查看此内容。

Answer 1

我想以@ErikS 的回答为基础。

在使用 CSS 类和 toggleClass 方法使用动画时，check out this question。这可能是一个很好的起点。

其他部分也可能需要更改。

在我看来，没有充分的理由不使用它们的公共类名来选择所有复选框。

$('.radio').click(function() {})

您也可以考虑使用方法 .on() 而不是 click()。这是一个很小的优化，但我认为至少值得一提。

其次，你不断创建新的 jQuery 对象来获取目标文本区域，因为你可以缓存第一个调用，所以它已经过时了。

var target = $('.textarea.expendable' + textboxCounter)

第三，方法调用可以被链接。这可能不是优化，但看起来更干净。

target.hide().prop('value', '');

要继续清理代码并使用 ErikS 的提议，而不是计算显示了多少文本区域，只需使用 toggleClass，它会为您处理一切。

最后我要提到的是，您可能希望使用更好的方法来确定将显示哪个文本区域。您可以利用 data 属性或使用 jQuery 的 index() 方法来找出作用于复选框的索引，因为它具有与其 textare 相同的索引。

总之，这是我对您的代码的建议。它可能不是世界上最好的代码，但对我来说它看起来更干净。

$('.purposeOfFeesText').addClass('display');

var checkboxes = $('.expendable');

checkboxes.click(function () {
    var that = $(this),
        index = checkboxes.index(that),
        target = $('textarea').eq(index);
    target.toggleClass('display');
});

Answer 2

我唯一想到的是使用 $().toggleClass() jQuery 函数，并使用样式定义设置 thexbox 的样式，因为它比设置 .show()、.hide() 更快。

---这取决于设计..但你可以使用类似的方法

<div>
 <input type='checkbox'.... />
 <textarea  style="display:none"/>
</div>

<script>
$('input').on('click',function(){
  $(this).is(':checked'){
    $(this).parent().find('textbox').css({opacity:0}).show().animate({opacity:1},500);
  }else{
    $(this).parent().find('textbox').animate({opacity:0},500,function(){
      $(this).hide();
    });
  }
});
</script>