Question

我的表单中有以下HTML代码段。 jQuery正在检查查看哪个无线电，然后使用text()方法更改元素中的文本。我确信有更好，更清晰的方式来写这个。有人可以详细说明如何以及为什么？

<p>
    <span class="input_small"><html:radio property="jobPosting.employmentTypeCode" value="RFT" styleId="fulltime" ><label for="fulltime">Full-Time</label></html:radio></span>
    <span class="input_small"><html:radio property="jobPosting.employmentTypeCode" value="RPT" styleId="parttime" ><label for="parttime">Part-Time</label></html:radio></span>
</p>

<p>
    <label for="responsibilities"><span class="job-time">*</span> position available with growing technology and government contracting firm. This person is responsible for:</label>
    <html:textarea property="jobPosting.requirements" rows="5" styleClass="input_xxxlarge" styleId="responsibilities" > </html:textarea>
</p>

jQuery的：

$(document).ready(function() {
    $('#fulltime').click(function() {
        if($('#fulltime').is(':checked')) {
            $('span.job-time').text('FT');
        }
    });
    $('#parttime').click(function(){
        if ($('#parttime').is(':checked')) {
            $('span.job-time').text('PT');
        }
    });
});

编辑：我想知道如何使用尽可能少的jQuery代码完成此任务。

Answer 1

你可以这样缩写：

 $('#fulltime, #parttime').click(function() {
    if($(this).is(':checked')) {
        $('span.job-time').text( $(this).val().substring(1) );
    }
  });

在这里，我的单选按钮值分别为RFT和RPT，分别为全职和兼职，因此我将最后两个字符设置为span.job-time。

Answer 2

你可以组合选择器，这样只有一个点击功能（你甚至可以缩短if提到的@Palash Mondal）：

$('#fulltime, #parttime').click(function() {
    if($('#fulltime').is(':checked')) {
        $('span.job-time').text('FT');
    }
    if ($('#parttime').is(':checked')) {
        $('span.job-time').text('PT');
    }
});

Answer 3

试试这个：

$('[id$=time]').change(function () {
    $('span.job-time').text($('#fulltime').is(':checked') ? 'FT' : 'PT');
});

调用change事件代替click，所以
id$=time用于以time文字
如果选中fulltime单选按钮，请将范围文本设为FT，否则设为PT。

结合jQuery text（）方法

3 个答案: