Question

我有以下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中的其他文本，可以取消选择以前选择的文本，并选择新文本。我怎么能这样做？

Answer 1

这就是你要找的东西：

http://jsfiddle.net/bT8vs/

jQuery：

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

Answer 2

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

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

Answer 3

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

highlight: JavaScript text higlighting jQuery plugin

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

3 个答案: