Question

我正在尝试一个代码，该代码使用select生成短语，您可以对其进行编辑以更改短语的含义。我想将单词“ est”添加到一个类中，以便它在页面中以与其他单词不同的字体显示。实际上，我的代码每次出现一个单词时都会重复div .un。

如何告诉代码option是否有class ="something"应用于其特定的.un其他样式？

我不想编辑列表中的样式（因为您已经看到，它已经完成了），我想更改显示结果的样式。 我希望以与列表中相同的样式显示“ est”一词。

这是我的代码：

 $(document).ready(function() {

                        });

                        let phrases = ["il n'est pas. "

                        ];
                        let lettres = /[\u0041-\u005a\u0061-\u007a\u00aa-\u00b5\u00ba-\u00c0\u00c1-\u00d6\u00d8-\u00f6]/gui;

                        tokenize = function(phrase) {
                            let mots = [''];
                            let it = phrase[Symbol.iterator]();
                            for (var c = it.next(); !c.done; ) {

                                for (; !c.done && c.value.match(lettres); c = it.next()) {
                                    mots[mots.length-1]+=(c.value);
                                }
                            //console.log(c.value);
                            if (mots[mots.length-1].length != 0 ){
                                mots.push('');
                            }

                            if (c.value == ' ') {
                                for (c = it.next(); !c.done && c.value == " "; c = it.next()) {continue;} continue;
                            } 
                                // console.log(i);
                                
                                console.log(mots);

                                if (!c.value.match(lettres)){
                                    mots[mots.length-1]+=(c.value);
                                //console.log(c.value);
                                mots.push('');
                            }
                            c = it.next();
                        }
                        return mots.slice(0, mots.length-1);

                    
                    }



                    $(document).ready(function() {
                        let LARGEUR = $("#container .repeat").clone();
                        let change=function(){
                            $(".width_tmp_option", this.parent).html($('option:selected', this).val());
                            $(this).width($(".width_tmp_select", this.parent).width());
                        }
                        $('#container').on("change",".un",change);


                        let idx = Math.floor(Math.random() * Math.floor(phrases.length));
                        let mots = tokenize(phrases[idx]);

                        for( var i = 0 ; i < mots.length-1; i++){
                            $('#container .repeat:last-child').after(LARGEUR.clone());}
                            var i = 0;
                            console.log(mots.length);
                            $('#container .repeat').each(function(){
                                $('.un', this).val(mots[i]).each(change);
                                i++;

                            });

           

                            $('select').on('change', function() {
                             let phrase = $('.un').get().reduce((a,b) => a+' '+b.value, '').substring(1).trim(); 
                             console.log(phrase);
                            if (phrase.includes('il est bleu')) {
                                $(".white").css('background-color', 'blue');
                            } else {
                                 $(".white").css('background-color', 'white');
                                }
                           
                            
                 });
            });

 .something{
        color:red;
        font-family: cursive;
    }

    body {
        width: 70vw;
        height: 100vh;
        overflow: normal;
        overflow: hidden;


    }

    .un{
        width: 2rem;
        margin: 0.2rem;
        font-family: sans-serif;
        font-size: 2.5rem; 
    } 


    .un * {

        border-radius: 15px;

        font-size: 2.5rem; 
    }

    option {
        background-color: none;

    }

    option:hover {
        background-color: green;

    }

    ::selection {
        background-color: green;
    }

    .width_tmp_select{
        background-color: none;

    }


    .width_tmp_select{
        display : none;
        font-size: 2.5rem; 
        font-family: 'Rungli-Italic';
    } 


    #p1{
        font-size: 2rem;
        border: none;
    } 



    /* For IE10 */
    select::-ms-expand {
        display: none;

    }

    .repeat {
        display: inline-block;

    }

    .continuer {
        opacity: 0.2;
        position: absolute;
        bottom: 0.5vw;
        right: 0.5vw;
        font-size: 2.5rem; 
        padding: 0.1vw;
    }

    .continuer:hover {
        opacity: 1;

        background-color: white;

    }

<script
        src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
        crossorigin="anonymous"></script>

    <body class="white">

        <div id="container">
            <div class="repeat">

                <select name="mots" class="un">
                    <option  value="il">il</option>
                    <option  class="something" value="est">est</option>  // I would like this one to have another style that the rest of the phrase.
                    <option value="bleu">bleu</option>
                    <option value="n">n</option>
                    <option value="'">'</option>
                    <option value="pas">pas</option>
                    <option value=".">.</option>

                </select>
                <select class="width_tmp_select">
                    <option class="width_tmp_option"></option>
                </select>
            </div>
        </div>

    </body>

Answer 1

您可以在$（'select'）。change函数中检查所选选项的类

$('select').on('change', function () {
let phrase = $('.un').get().reduce((a, b) => a + ' ' + b.value, '').substring(1).trim();
console.log(phrase);
var selectedOption = $(this).find('option:selected');
var optionClass = selectedOption.attr('class');//here you can get option class
if(optionClass === "something"){
  //do stuff here
}
if (phrase.includes('il est bleu')) {
    $(".white").css('background-color', 'blue');
} else {
    $(".white").css('background-color', 'white');
}
});

在所有下拉列表中都应用了更改事件，因此 $（this）.find（'option：selected'） 将为您提供当前下拉菜单的当前选定选项

更改特定选定选项的样式

1 个答案: