检查文本以创建事件

Question

我正在制作一个网站，用户必须在其中使用 select 选项中的单词创建短语。我希望能够检测到他正在创建一个事件的句子；就像句子是“天空是蓝色的”所以“把背景颜色变成蓝色”。或者“很大”所以“将文本大小更改为更大的字体”

所以我假设它看起来类似于：

if (phrase = "I am blue."){
$(".white").css('background-color', 'blue');
}

或：

if (phrase = "Is big"){
$(".white").css('font-size', '5em');
}

所有里面的东西

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

它没有用，它必须到达短语。这是我的一个朋友帮我做的代码：

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

                        if (phrase === "I am blue."){
                                $(body).css('background-color', 'blue');
                        }
                }



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

                        });

                // for ( var i in mots){
                //  let div = LARGEUR.clone();
                //  div.find('.un').val(mots[i]);
                //  console.log(i);
                //  div.find('.un').each(change);
                    //div.css('display', 'inline');


            //  }
            // //   $('#container .repeat:first-child').css('display', 'none');

        });

    @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;


    }

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <script
        src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
        crossorigin="anonymous"></script>

        <link rel="stylesheet"type="text/css"href="style.css">
        <link rel="stylesheet"type="text/css"href="print.css" media="print">

        <title>Les Vergers</title>

    </head>
    <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>

                <script type="text/javascript">
                    $(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);

                        if (phrase === "I am blue."){
                                $(body).css('background-color', 'blue');
                        }
                }



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

                        });

        });

    </script>

    </body>


    </html>

Answer 1

我希望我明白你需要什么，如果不明白的话让我明白
知道了，我会编辑我的答案。

示例HTML：

  <select id="colorChanger">
    <option value="blue">Blue</option>
    <option value="orange">Orange</option>
    <option value="red">Red</option>
    <option value="green">Green</option>
    <option value="black">Black</option>
  </select>

示例 jQuery（确保已加载 jquery）

<script>
jQuery(function($){
    $('#colorChanger').on('change', function() {
        var bgcolor = $(this).val();
        $('body').css('background', bgcolor);
    })
})
</script>

实例：
https://jsfiddle.net/sagive/tj9s7bf5/3/

您还可以在 select 选项中使用直接十六进制代码（即：#ff0099）代替颜色名称。您基本上可以将其应用于任何 select（具有唯一 ID）。

编辑 1：
根据您的要求 - 另一个例子

    <select id="firstSelect" class="watchedSelect">
        <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 id="secondSelect" class="watchedSelect">
        <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 id="thirdChanger" class="watchedSelect">
        <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 id="fourthChanger" class="watchedSelect">
        <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>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
jQuery(function($){
    $('.watchedSelect').on('change', function() {

        var first   = $('.firstSelect').val();
        var second  = $('.secondSelect').val();
        var third   = $('.thirdChanger').val();
        var fourth  = $('.fourthChanger').val();

        var phrase  = $first + ' ' + section + '' + third + '' + fourth;

        if( phrase == 'i am blue' ) {
            $('body').css('background', 'blue');
        }
        else if( phrase == 'i am not blue' ) {
            $('body').css('background', 'black');
        }
    })
})
</script>

检查文本以创建事件

check the text to create an event

jquery

events

text

detection