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

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

我唯一想到的是使用$（）。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>

Answer 2

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

在使用CSS类和toggleClass方法使用动画时， 请查看此问题 。 这可能是一个很好的起点。

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

在我看来，没有充分的理由不选择使用其通用类名的所有复选框。

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

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

其次，您将继续创建新的jQuery对象以获取目标文本区域，这已过时，因为您可以缓存第一个调用。

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

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

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

要继续清理代码并使用ErikS的建议，无需计算已显示的文本区域数，只需使用toggleClass，它将为您处理所有事情。

最后我想提一提的是，您可能想使用一种更好的方法来确定将显示哪个文本区域。 您可以利用数据属性或使用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');
});