Question

这是我的HTML代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabella">
        <div class="rigaHead"></div>

                <div class="rigaEven">
                    <div class="col1">
                        <p class='room'>XXX</p>
                        <p class='where'>WHERE</p>
                    </div>
                    <div class="col2 half">
                        <p class='when'>09:00 - 13:00</p>
                    </div>
                    <div class="col3">
                         <p class="what">YYY</p>
                        <p class="who">PROFESSOR</p>
                    </div>
                </div>

                <div class="rigaOdd">
                  <div class="col1">
                        <p class='room'>XXX</p>
                        <p class='where'>WHERE</p>
                    </div>
                    <div class="col2 half">
                        <p class='when'>11:00 - 13:00</p>
                    </div>
                    <div class="col3">
                         <p class="what">ZZZ</p>
                        <p class="who">PROFESSOR</p>
                    </div>
                </div>

        </div>
    </div>

    <input type="text" id="search" onKeyUp="search()" />

我尝试只显示当标签文本包含一小时（09:00）时的div

function search() {
        var text = $('#search').val();
        $( "p").css( "text-decoration", "none" );
        $( ".rigaEven").hide();
        $( ".rigaOdd").hide();

        $( ".rigaEven:contains("+text+")" ).show();
        $( ".rigaOdd:contains("+text+")" ).show();

        $( "p:contains("+text+")" ).css( "text-decoration", "underline" );
    }

但它不起作用，代码$( ".rigaEven:contains("+text+")" ).show();仅在包含确切文本时才有效，或者如果文本是9:00到11:00且我的输入是9:00看不到任何内容？< / p>

Answer 1

尝试使用以下功能：

function search() {
        var text = $('#search').val();
        $( "p").css( "text-decoration", "none" );
        $( ".rigaEven").hide();
        $( ".rigaOdd").hide();

        $( ".rigaEven:contains("+text+")" ).show();
        $( ".rigaOdd:contains("+text+")" ).show();

        $( "p.when:contains("+text+")" ).css( "text-decoration", "underline" );
    }

我只是从你的脚本中替换一行：

来自$( "p:contains("+text+")" ).css( "text-decoration", "underline" ); 到

$( "p.when:contains("+text+")" ).css( "text-decoration", "underline" );

DEMO

希望它对你有所帮助。感谢

Answer 2

我有一点闲暇时间，所以我快速了解了如何解决这个问题。

我使用Regular Expressions来解析输入字段中的有效时间签名以及页面上指定元素中包含的文本。快速搜索显示simple regex为我做了这个。

我没有使用jQuery来完成DOM工作，而是使用内置于Web的Document API。这允许我获取页面上的元素和其中包含的信息，在本例中为innerText和value。

使用我们感兴趣的两个元素的文本，并使用String.prototype.match然后String.indexOf获取和解析与时间签名匹配的字符串的输入字段，以进一步将结果缩小到包含冒号:我将结果传递给了moment.js。

我使用了moment.js，因为它只是简化了日期和时间的处理。这几乎肯定可以在没有任何库的情况下完成，而且时刻非常臃肿，但为了节省时间，我使用它。

在这里，时刻基本上处理了模糊匹配，我们可以让时刻进行繁重的工作，然后比较我们给出的“时刻”。

这是jsFiddle，它与原始HTML一起使用。

这是我用来完成任务的javascript，不是最漂亮但我已经准备好花在这上面了。

function search() {
  var searchString = document.getElementById('search').value;
  var matchedTimes = matchTimeSignatures(searchString);
  if (matchedTimes) {
    searchCachedElements(matchedTimes.shift());
  }
}

function matchTimeSignatures(text) {
  var results = text.match(/([01]?[0-9]|2[0-3]):[0-5][0-9]/);
  if (results) {
    return parseMatches(results);
  }
}

function parseMatches(matchesArray) {
    var dateArray = [];
    matchesArray.forEach(function(item) {
    if (item.indexOf(':') !== -1) {
        dateArray.push(new moment(item, 'h:mm'));
    }
  });
  return dateArray;
}

function searchCachedElements(timeToMatch) {
  var elements = getElements();
  Object.keys(elements).forEach(function(el) {
    var matches = matchTimeSignatures(elements[el].innerText);
    if (compareResults(matches, timeToMatch)) {
      elements[el].style.display = 'initial';
    }
  });
}

function compareResults(matches, timeToMatch) {
  var positiveMatch = false;
  matches.forEach(function(match) {
    if (match.toString() === timeToMatch.toString()) {
      positiveMatch = true;
    }
  });

  return positiveMatch;
}

function getElements() {
  return {
    rigaEvenElement: document.querySelector('.rigaEven'),
    rigaOddElement: document.querySelector('.rigaOdd')
  };
}

document.getElementById('search').addEventListener('keyup', search);

模糊匹配元素内的文本到时间字符串

2 个答案: