检查 select 的内容以更改 css 属性

Question

我正在制作一个网站，您可以在其中使用多个 select 选项来创建句子。我希望能够检测到用户何时更改它们以创建一些特定的句子，例如“我”、“我”、“蓝色”正在将颜色更改为蓝色。事实上，这只是一个选项，我想要一个包含多个动作的列表，“我很大”，“我被轮换”并且每次都做一些不同的事情，所以我尝试了这个：

$('select').on('change', function() {
    console.log(phrase);
    if (phrase = "Is big"){
       $(".white").css('font-size', '5em');
    }
});

但它不起作用，因为代码无法到达函数 phrase（下面的代码位于其他地方）。此代码在开头创建一个短语，保留它并在您更改 select 值时使其演变。

$(document).ready(function() {

                    });

                    let phrases = ["I am not. "

                    ];
                    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++;

                        });

  

        });

@font-face {
        font-family: "Lexicon";
        src: url("fontes/Lexicon.woff") format("woff");
    }


    body {
        width: 70vw;
        height: 100vh;
        overflow: normal;
        font-family:'Lexicon';
        overflow: hidden;


    }

    .un{
        width: 2rem;
        margin: 0.2rem;
        font-family: 'Lexicon';
    } 

    option {
        background-color: none;
        font-family: 'Lexicon';
    }

    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: 'Lexicon';
    } 

    .un{
        font-size: 2.5rem; 

    } 

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

    select {

    }

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

    }

    .repeat {
        display: inline-block;


    }

<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=""> </option>
        <option value=".">.</option>
        <option value="I">I</option>
        <option value="am">am</option>
        <option value="blue">blue</option>
        <option value="not">not</option>
        <option value="is">is</option>
        <option value="big">big</option>
        <option value="!">!</option>
      </select>
      <select class="width_tmp_select">
        <option class="width_tmp_option"></option>
      </select>
    </div>
  </div>
</body>

Answer 1

通过 phrase = "Is big" 你设置变量 parse 等于 "Is big" 如果你想检查它是否相等使用 phrase === "Is big".

全文：

$('select').on('change', function() {
                        console.log(phrase);
                        if (phrase === "Is big"){
                        $(".white").css('font-size', '5em');
                        }
                    });

检查 select 的内容以更改 css 属性

checking the content of a select to change a css property

html

javascript

css

jquery

detection