javascript - 仅将样式应用于所选选项

Question

我正在制作一个网站，您可以向您展示可以使用选择进行编辑的句子。我想要在定义时保留样式的选项。或者能够检测class="something"到样式选择。

实际上，我所做的能够检测是否单击了 class="something" 并将样式应用于每个选择，而不仅仅是带有所选单词的选择。

简单起见，我想在选择时对具有“某物”类的单词应用不同的词（不仅在下拉菜单中）。

这是有人帮助做的事情：

$('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');
}
});

但这将一种样式应用于我的所有选择，而不仅仅是选择的option class="something" 那个

 $(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>

标签： javascripthtmljquerycsstext

Answer 1

首先，您必须找到somethingclass 选项的父元素，并在其上应用 CSS。取消选择时，您还必须删除样式。

var selectedOption = $(this).find('option:selected');
var optionClass = selectedOption.attr('class');//here you can get option class
if(optionClass === "something"){
    selectedOption.parent().css('color', 'red');
} else {
    selectedOption.parent().css('color', '');
}

您会注意到，在这种情况下，<option>元素继承了其 parent 的红色样式<select>。<option>为避免这种情况，请为非类的s明确指定黑色字体something。

option:not(.something) {
    color:black;
}

$(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);
                             var selectedOption = $(this).find('option:selected');
                             var optionClass = selectedOption.attr('class');//here you can get option class
                             if(optionClass === "something"){
                                selectedOption.parent().css('color', 'red');
                             } else {
                                selectedOption.parent().css('color', '');
                             }
                            if (phrase.includes('il est bleu')) {
                                $(".white").css('background-color', 'blue');
                            } else {
                                 $(".white").css('background-color', 'white');
                                }
                           
                            
                 });
            });

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

option:not(.something) {
    color:black;
}

    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>