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 回答