JQuery Plugin - 突出显示包含某个单词的内容可编辑框答案

【问题标题】：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>

【讨论】：