0

我正在尝试根据框的值显示/隐藏输入字段块。如果我坚持使用 show() 和 hide() 效果很好，但是一旦我输入速度 show(100) 和 hide(100) 事情就会中断。

应该发生的是：

  • 如果 select 的值是在数组中找到的项目，则应显示该块。
  • 如果选择的值不是在数组中找到的项目，则不应显示该块。
  • 如果选择的值是在数组中找到的项目并且该块是可见的，则不应发生任何事情。

jsFiddle 示例代码：http: //jsfiddle.net/PkBg6/

  • 零售个人不应显示块
  • 员工不应显示该块
  • 其他一切都应该显示块

HTML

<div class="input-control select double-margin-right span3">

    <label for="customerType">Customer Type</label>

    <select data-required="false" id="customerType">
        <option value="retailIndividual">Retail Individual</option>
        <option value="retailBusiness">Retail Business</option>
        <option value="dealer">Dealer</option>
        <option value="raceTeam">Race Team</option>
        <option value="membershipClub">Membership Club</option>
        <option value="employee">Employee</option>
    </select>
</div>
<div class="row clearfix" id="groupMember" style="display: none;">
    <div class="input-control text span3">
        <label for="businessName">Business Name</label>
        <input type="text" id="businessName" data-required="true" />
    </div>
    <div class="input-control text span3">
        <label for="department">Department</label>
        <input type="text" id="department" data-required="false" />
    </div>
</div>

JavaScript

$.fn.toggleFieldset = function(stringText, x) {
    var arrayText = stringText;

    for(var i = 0; i < arrayText.length; i++) {
        if( $(this).val() == arrayText[i] ) {
            $(x).show();
            return;
        }

        else {
            $(x).hide();
        }
    }    

    $(this).on('change', function() {
        for(var i = 0; i < arrayText.length; i++) {
            if( $(this).val() == arrayText[i] ) {
                $(x).show(100);
                console.log('show');
                return;
            }

            else {
                $(x).hide(100);
                console.log('hide');
            }
        }
    });
};


$(document).ready(function () {    
    $('#customerType').toggleFieldset(['retailBusiness', 'dealer', 'raceTeam', 'membershipClub'], '#groupMember');
});
4

1 回答 1

0

当您不希望它运行时，else 子句正在运行。When say dealer is selected it gets executed when compared to retailBusiness which hides it then it gets shown when it matches itself again. 这是对我有用的 onchange 函数。

$(this).on('change', function() {
    var match = false;
    for(var i = 0; i < arrayText.length; i++) 
        if( $(this).val() == arrayText[i] ) 
            match = true;
    if( match ) {
       $(x).show(100);
       console.log('show'+arrayText[i]);
       return;
    }
    else {
       $(x).hide(100);
       console.log('hide'+arrayText[i]);
    }
});
于 2013-06-14T02:17:16.230 回答