【问题标题】:How to unhighlight onclick? [duplicate]如何取消突出显示点击? [复制]
【发布时间】:2018-12-03 13:27:42
【问题描述】:

我对高亮和非高亮表有疑问! 我有一张桌子,当我单击一个 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我卡在这里

【问题讨论】:

  • 这不是 jQuery 的答案。我认为这不是重复的
  • @TerryWei 嗨!感谢您的回复,但它不起作用。您还有其他选择吗?
  • @PGCodeRider 这个我已经试过了,但还是一样
  • PHP与你的问题无关。

标签: javascript html css highlight


【解决方案1】:

这里有问题:

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

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

selectedclick-here 的父级。

所以

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

应该是

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

已编辑

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

【讨论】:

  • 它仍然无法工作当我单击另一个 td 时,所有内容仍然突出显示
  • $('.selected').not($td) 选择突出显示的元素吗?
  • 好!它的工作!非常感谢!!!!
  • 如果这有帮助,请您检查这个作为答案吗?
  • 完成!非常感谢您的帮助:)
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2010-10-04
  • 1970-01-01
  • 2011-08-01
  • 1970-01-01
  • 2015-09-27
  • 2012-09-21
相关资源
最近更新 更多