Question

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

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>

它确实有效，因为它告诉它淡出1 这个：

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

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

任何帮助都会很棒！

Answer 1

如果在调用函数后检查元素，您将看到在内部输入范围上正确设置了不透明度（我认为您承认）。问题在于不透明度如何起作用，基本上你已经褪色整个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);
         });
     });
 });

示例here。

这有点像黑客，你可能想重新考虑结构使其更容易，或者选择不同的突出显示方法（黄色背景非常普遍理解）。

您可能还想更改搜索系统以确保不能匹配任何奇数，目前元素之间的空白是可匹配的（这会产生奇怪的结果）。

编辑：另请参阅此答案：CSS opacity and child elements

在褪色之后重新褪色

1 个答案: