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函数，并使用样式定义设置xboxes样式，因为它比设置.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方法使用动画时，check out this question。这可能是一个很好的起点。

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

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

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

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

其次，你不断创建新的jQuery对象来获取目标textarea，这已经过时，因为你可以缓存第一个调用。

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

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

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

要继续清理代码并使用ErikS的提案，而不是计算已显示的textareas数量，只需使用toggleClass，它将为您处理所有内容。

我想提到的最后一件事是你可能想用更好的方法来确定哪个textarea会被显示出来。您可以利用数据属性或使用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');
});

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

2 个答案: