1

嘿,我这里有这段代码,它会淡化页面上的所有表格,然后,如果找到了搜索词,则突出显示该词。但是,我似乎无法让它重新淡入找到搜索词的那一行。

function searchAndHighlight(searchTerm, selector) {
    if(searchTerm) {
        var selector = selector || "body";
        var searchTermRegEx = new RegExp(searchTerm, 'ig');
        var matches = $(selector).text().match(searchTermRegEx);

        if(matches) {
            $('.highlightedSearched').removeClass('highlightedSearched');
            $(selector).html($(selector).html().replace(searchTermRegEx, "<span class='highlightedSearched'>"+searchTerm+"</span>"));

            if($('.highlightedSearched:first').length) {
                $(".table").each(function( index ) {
                    $(this).fadeTo( "slow" , 0.2, function() {
                        $(".highlightedSearched").each(function( index ) {
                            $(this).fadeTo( "slow" , 1, function() {
                                $('html, body').animate({scrollTop:$('.highlightedSearched:first').position().top - 130}, 'slow');
                            });
                        });
                    });
                });
            }

            return true;
        }
    }
    return false;
}

<div class="table" style="opacity: 0.2;">
  <div class="row" onclick="changeChannel(3);" data-searched="name">
    <span class="cell">
      <img class="stationImg" src="images/logo1.jpg"><br>
      <div align="center" class="Channel">Channel 3<br>name</div>
    </span>
    <span class="cell_2hr">
      <span class="timeForShow">1:00p-3:00p<br></span>
      <span class="tvShowTitle">Golf: <span class="highlightedSearched" style="opacity: 1;">The</span> Challenge<br></span>
      <span class="tvEpisodeTitle">&nbsp;</span>
    </span>
    <span class="cell_30min">
      <span class="timeForShow">3:00p-3:30p<br></span>
      <span class="tvShowTitle">News<br></span>
      <span class="tvEpisodeTitle">&nbsp;</span>
    </span>
  </div>
</div>

它确实有效,因为它告诉它 fadeTo 1这个

<span class="highlightedSearched" style="opacity: 1;">The</span> Challenge<br></span>

但我需要它来查找highlightSearched所在的类。

任何帮助都会很棒!

4

1 回答 1

0

如果您在调用函数后检查元素,您会看到内部输入跨度上的不透明度设置正确(我认为您承认)。问题在于不透明度是如何工作的,基本上你已经淡化了包括所有孩子在内的整个 DIV,这压倒了你改变孩子的尝试。

现在,当您进行搜索替换时,首先为内部跨度提供一个额外的类(例如dimmable),您想要关闭该跨度并打开一个新的跨度:

$(selector).html($(selector).html().replace(searchTermRegEx, 
    "</span><span class='highlightedSearched dimmable'>"+
    searchTerm+
    "</span><span class='dimmable'>"
));

请注意 searchTerm 类仍然是可调光的,因为您希望它淡出然后进入。然后执行以下操作:

 $(".dimmable").each(function( index ) {
     $(this).fadeTo( "slow" , 0.4, function() {
         $(".highlightedSearched").each(function( index ) {
             $(this).fadeTo("slow", 1);
         });
     });
 });

这里的例子。

这有点小技巧,您可能需要重新考虑结构以使其更容易一些,或者选择不同的突出显示方法(黄色背景很普遍)。

您可能还想更改搜索系统以确保没有任何奇怪的东西可以匹配,目前元素之间的空格是可匹配的(这会产生奇怪的结果)。

编辑:另见这个答案:CSS不透明度和子元素

于 2013-12-16T05:21:03.800 回答