单击时突出显示特定的 div 文本答案

【问题标题】：Highlight particular div text on click单击时突出显示特定的 div 文本
【发布时间】：2013-08-06 09:53:46
【问题描述】：

我有以下 HTML。

<div id = "aa">
        <table width="100%">
            <tbody>
                <!-- ngRepeat: msg in globalChat -->
                <tr class="ng-scope" ng-repeat="msg in globalChat" ng-1375781897068="8">
                    <td class="ng-binding" ng-1375781897068="9">
                        A
                    </td>
                </tr>
                <tr class="ng-scope" ng-repeat="msg in globalChat" ng-1375781897068="10">
                    <td class="ng-binding" ng-1375781897068="11">
                        B
                    </td>
                </tr>
                <tr class="ng-scope" ng-repeat="msg in globalChat" ng-1375781897068="12">
                    <td class="ng-binding" ng-1375781897068="13">
                        C
                    </td>
                </tr>
                <tr class="ng-scope" ng-repeat="msg in globalChat" ng-1375781897068="14">
                    <td class="ng-binding" ng-1375781897068="15">
                        D
                    </td>
                </tr>
                <tr class="ng-scope" ng-repeat="msg in globalChat" ng-1375781897068="16">
                    <td class="ng-binding" ng-1375781897068="17">
                        E
                    </td>
                </tr>
                <tr class="ng-scope" ng-repeat="msg in globalChat" ng-1375781897068="18">
                    <td class="ng-binding" ng-1375781897068="19">
                        F
                    </td>
                </tr>
                <tr class="ng-scope" ng-repeat="msg in globalChat" ng-1375781897068="20">
                    <td class="ng-binding" ng-1375781897068="21">
                        G
                    </td>
                </tr>
                <tr class="ng-scope" ng-repeat="msg in globalChat" ng-1375781897068="22">
                    <td class="ng-binding" ng-1375781897068="23">
                        H
                    </td>
                </tr>
                <tr class="ng-scope" ng-repeat="msg in globalChat" ng-1375781897068="24">
                    <td class="ng-binding" ng-1375781897068="25">
                        I
                    </td>
                </tr>
                <tr class="ng-scope" ng-repeat="msg in globalChat" ng-1375781897068="26">
                    <td class="ng-binding" ng-1375781897068="27">
                        J
                    </td>
                </tr>
                <tr class="ng-scope" ng-repeat="ms`enter code here`g in globalChat" ng-1375781897068="28">
                    <td class="ng-binding" ng-1375781897068="29">
                        K
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

我已经使用 AngularJS 来渲染值

我只是希望，如果我单击 div 中的任何文本，那么只有该特定文本应该在 div 中突出显示。通过单击 div 中的其他文本，应取消选择先前选择的文本并选择新文本。我该怎么做？

【问题讨论】：

标签： c# jquery css

【解决方案1】：

这是你要找的吗：

http://jsfiddle.net/bT8vs/

jQuery：

$(document).ready(function(){
    $('div p').click(function(){
       $('div p').css("background-color", "transparent");
       $(this).css("background-color", "yellow");
    });
});

【讨论】：

【解决方案2】：

这与 imconnell 的答案几乎相同，但适用于给定的布局：http://jsfiddle.net/rpqvX/7/

$(function() {
    $("td.ng-binding").click(function() {
        $("td.ng-binding").removeClass("highlight");
        $(this).addClass("highlight");
    });
})

【讨论】：

实际上是一个更好的答案，因为它添加了一个类而不是直接编辑 CSS。
我正在使用以下代码绑定数据并使用您的答案，但它不起作用...

{{msg.name}}
能否请您创建一个新的 jsFiddle 并将链接粘贴到此处？
要突出显示的 td 单元格必须具有“ng-binding”类，否则更改 jquery 选择器。

【解决方案3】：

作为替代方案，请查看以下 jQuery 插件：

highlight: JavaScript text higlighting jQuery plugin

【讨论】：