如何取消onclick的高亮显示？

Question

如何取消onclick的高亮显示？

3

我有一个与表格高亮和取消高亮相关的问题！我有一个表格，当我点击一个 td 时，它会高亮显示，但是当我点击另一个 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");
                    });
                });

如何取消之前的点击高亮？有人能帮我吗？我被卡住了。

- jevtam_

请尝试在此处检查：https://stackoverflow.com/questions/40252350/highlight-cell-border-color-when-click-change-back-when-click-to-others - Snow

这不是jQuery的答案。在我看来，这不是重复的。 - Terry Wei

@TerryWei 你好！谢谢你的回复，但是它不起作用。你有其他的替代方案吗？ - jevtam_

@PGCodeRider 我已经尝试过了，但还是一样。 - jevtam_

PHP与你的问题无关。 - j08691

这是我的错，没有检查答案。已经给出了编辑后的答案。这是jQuery选择器的问题。你最好知道你在选择什么。 - Terry Wei

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Terry Wei · Accepted Answer

这里有一个问题：

$('.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