【问题标题】:JQuery Plugin - Highlighting a content editable box that contains a certain wordJQuery Plugin - 突出显示包含某个单词的内容可编辑框
【发布时间】:2021-06-14 09:50:51
【问题描述】:

这里是 HTML/CSS - https://jsfiddle.net/toalhea/y6hns5tr/1/

我正在尝试为作业创建一个 jquery 插件,该插件将突出显示单词或包含单词“burger”的框。

我对 jquery 和 javascript 还很陌生,只是迷失了如何做到这一点。建议使用innerhtml 或innertext。任何帮助表示赞赏。

(function($) {

   $.fn.highlightword = function () {
      this.css( "background", "yellow" ); 
            
      }
   }

}(jQuery));

【问题讨论】:

    标签: javascript html jquery css jquery-plugins


    【解决方案1】:

    $(document).ready(function() {
       $( "#sortable1, #sortable2, #sortable3" ).sortable({
          connectWith: "#sortable1, #sortable2, #sortable3",
       });
       $('[contentEditable="true"]').on('click', function () {
          $(this).focus();
          $(this).css("background-color", "yellow")
          $(this).blur(function() {
           $(this).css("background-color", "white")
          })
      });
    });
    .container {
        margin:auto;
        max-width: 1000px;
    }
    #sortable1, #sortable2, #sortable3 {
        border: 1px solid #012361;
        width: 15%;
        min-height: 20px;
        list-style-type: none;
        padding: 5px 0 0 0;
        float: left;
      }
    #sortable1 li, #sortable2 li, #sortable3 li {
        margin: 0 5px 5px 5px;
        padding: 5px;
        font-size: 1.2em;
        width: 120px;
      }
    
    h2 {
          display: inline;
          margin-right: 6em;
        }
    body {
        background-color: aliceblue;
    }
    #sortable {
      display: flex;
      flex-direction: column;
    }
    #sortable ul {
      width: 100%;
    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <title>Menu-Sortable</title>
            <meta charset="UTF-8"/>
            <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
            <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
            rel = "stylesheet">
            <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
            <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
            <link rel="stylesheet" href="menu.css">
            <script src="js/jquery.highlight-word.js"></script>
            <script src="js/script.js"></script>
          </head>
    
    
        <body>
            <div class="container">
                <h1> Sort the menu items to their appropriate header or rename the items to fit the category.</h1>
                <h2>Appetizer</h2> <h2>Main Course</h2><h2>Dessert</h2> <br><br>
            <div id="sortable">
                <ul id="sortable1">
                    <li contenteditable="true"> Mozzerella Sticks</li>
                    <li contenteditable="true"> Brisket Nachos</li>
                    <li contenteditable="true"> Quesadillas</li>
                    <li contenteditable="true"> Salsa and Chips</li>
                    <li contenteditable="true"> Queso and Chips</li>
                    <li contenteditable="true"> Brisket Mac & Cheese</li>
                </ul> 
    
                <ul id="sortable2">
                    <li contenteditable="true"> SouthWest Burger</li>
                    <li contenteditable="true"> Hawaiian Burger<li>
                    <li contenteditable="true"> Cannoli</li>
                    <li contenteditable="true"> Beef Brisket Sandwhich</li>
                    <li contenteditable="true"> Turkey Club Sandwhich</li>
                    <li contenteditable="true"> Lemon Souffles</li>
                </ul> 
    
                <ul id="sortable3">
                    <li contenteditable="true"> Wonton Tacos</li>
                    <li contenteditable="true"> Molten Chocolate Lava Cake</li>
                    <li contenteditable="true"> English Custard</li>
                    <li contenteditable="true"> Queso Burger</li>
                    <li contenteditable="true"> Chocolate Chip Panookies</li>
                    <li contenteditable="true"> Frozen Hot Chocolate</li>
                </ul>
            </div>
    
    
            </div>
        </body>
    
    
    </html>

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2013-06-29
      • 1970-01-01
      • 1970-01-01
      • 2014-03-16
      • 2018-11-08
      • 1970-01-01
      • 2020-07-08
      相关资源
      最近更新 更多