1

テキスト領域に特定のロールを入力し、ブートストラップを使用してポップアップ ブロックで強調表示しようとしています。

予想される動作は、選択したロールを強調表示する必要があることです.jqueryにidセレクターを使用するとコードは機能しますが、同じコードはクラスセレクターでは機能しません

<textarea name="options" id="options" cols="30" rows="10">admin user</textarea>


<a class="btn" data-toggle="modal" href="#myModal">Launch Modal</a>
<div class="modal hide fade" id="myModal" class="myModal">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">×</a>
        <h3>Modal header</h3>
    </div>
    <div class="modal-body">
        <div>
            <ul>
                <li class="mlist">admin</li>
                <li class="mlist">user</li>
                <li class="mlist">guest</li>
                <li class="mlist">blank</li>
            </ul>
        </div>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn btn-primary" data-dismiss="modal">Close</a>
    </div>
</div>

<script type="text/javascript">

    $(document).ready(function (){
        console.log('Inside onready');
        $('.myModal').on('show', function () {
            console.log('Inside show');
            var option = $('#options').val();
            var options = option.split(" ");
            console.log('Selected roles: ' + options);

            for (var index = 0; index < options.length; index++) {
                highlight(options[index]);
            };
        });
        $('.myModal').on('hide', function () {
            console.log('Inside onhide');
            $('.mlist').removeClass('btn-primary');
        });
    });

    function highlight(parOptions) {
        $('.mlist:contains("' + parOptions +'")').addClass('btn-primary');
    }

</script>
4

1 に答える 1

4

div に 2 つの class タグがあることに関係していると思います。

<div class="modal hide fade" id="myModal" class="myModal">

への変更

<div class="modal hide fade myModal" id="myModal">
于 2012-08-06T05:02:43.110 に答える