0

ボックスの値に基づいて入力フィールドのブロックを表示/非表示にしようとしています。show() と hide() に固執すれば問題なく動作しますが、スピード show(100) と hide(100) を入れるとすぐに問題が発生します。

起こるべきことは次のとおりです。

  • select の値が配列で見つかった項目である場合、ブロックが表示されます。
  • select の値が配列で見つかったアイテムでない場合、ブロックは表示されません。
  • 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 句は、実行したくないときに実行されています。ディーラーが選択されると、それを非表示にする RetailBusiness と比較して実行され、それ自体が再び一致すると表示されます。これが私のために働いた 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 に答える