javascript - 如何取消突出显示onclick？

<分区>

我对突出显示和取消突出显示表格有疑问! 我有一张 table ，当我点击一个 td 时，它会突出显示，但是当我点击另一个时，它也会突出显示，但我的第一次点击(突出显示)不会消失。

这是我的 php:

<table class="cg-nav-wrapper cg-nav-wrapper-row-2" id="tableID" data-role="cg-nav-wrapper">
<tr>
        <?php
            include 'includes/connection/dbh.inc.php';

            $categories =array("Agriculture & Food", "Apparel, Textiles & Accessories", "Maintenance & Repair", "Auto & Transportation", "Business & Commercial", "Computer Electronics", "Electronics & Electrical Equipment", "Health & Beauty", "Home, Lights & Construction", "House Cleaning", "House Improvement", "Machinery, Industrial Parts & Tools", "Packaging, Advertising & Office");

                        $len = count($categories);


                        for($x = 0; $x < $len; $x++) {

                            $current = $categories[$x];

                            $sql = "SELECT count(company_business_category) AS total FROM businesses WHERE company_business_category ='$current' ";

                            $result = mysqli_query($conn, $sql);

                            $count=mysqli_fetch_assoc($result);

                            $num = $count['total'];

                            if($current=='Agriculture & Food'){
                                if($num>0){
                                    ?>
                            <td class="anchor-wrap anchor1-wrap" data-role="anchor1">
                                     <a class="anchor1 anchor-agricuture showSingle click-here agricutureTD" inputtype="checkbox" target="1" data-role="cont" >
                                      <i class="cg-icon"></i>
                                      <span class="desc">
                                         Agriculture &amp; Food
                                      </span>
                                     </a>
                              </td>

                        <?php
                    }else{
            ?>
                        <td class="anchor-wrap anchor1-wrap" data-role="anchor1">
                        <a class="anchor1 anchor-agricuture click-here agricutureTD"
                                    data-role="cont" >
                                                <i class="cg-icon"></i>
                                                <span class="desc">
                                                    Agriculture &amp; Food
                                                </span>
                                            </a>
                                        </td>
                                    <?php
                                }
                            }

                            else if($current=='Apparel, Textiles & Accessories'){
                                if($num>0){
                                    ?>
                                        <td class="anchor-wrap anchor2-wrap showSingle apparelTD " target="2" data-role="anchor2">
                                            <a class="anchor2 anchor-apparel click-here apparelTD"  data-role="cont" >
                                                <i class="cg-icon"></i>
                                                <span class="desc">
                                                    Apparel,Textiles &amp; Accessories
                                                </span>
                                            </a>
                                        </td>
                                    <?php
                                }else{
                                    ?>
                                        <td class="anchor-wrap anchor2-wrap cl apparelTD" target="2" data-role="anchor2">
                                         <a class="anchor2 anchor-apparel click-here apparelTD"  data-role="cont">
                                                <i class="cg-icon"></i>
                                                <span class="desc">
                                                    Apparel,Textiles &amp; Accessories
                                                </span>
                                            </a>
                                        </td>
                                    <?php
                                }
                            }

                         }
                    ?>

        </table>  ....

这是我的js:

 $(document).ready(function(){
    var target = $('.cg-main').html();
    var nothing = '<div class="item util-clearfix targetDiv" data-spm="1" id="div1">' +
                            '<h3 class="big-title anchor1'+
                                        '404 Nothing Found' +
                            '</h3>'+
                            '<div class="sub-item-wrapper util-clearfix">'+
                                    '<div class="sub-item">'+       
                                        ''+                                 
                                    '</div>'+
                            '</div>'+
                        '</div>'; 

                    $('.click-here').on('click',function(){

                      var $td = $(this).parent();
                        $('.click-here').not(this).removeClass("selected");
                        $td.toggleClass("selected");
                    });
                });

如何取消突出显示我之前的点击？有人帮帮我 T.T 我卡在这里了

最佳答案

这里有问题:

$('.click-here').on('click', function() {

    var $td = $(this).parent();
    $('.click-here').not(this).removeClass("selected");
    $td.toggleClass("selected");
});

selected 用于click-here 的父级。

所以

$('.click-here').not(this).removeClass("selected");

应该是

$('.selected').not($td).removeClass("selected");

已编辑

我的错误是没有将 click-here 替换为 .selected

关于javascript - 如何取消突出显示onclick？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51015540/