突出显示与所选日期匹配的Div

时间：2017-12-22 18:01:48

标签： javascript jquery html css

我有一个功能是用户可以添加注释，并在注释上方显示添加注释的日期。我希望用户能够按日期搜索某个音符，并且将突出显示与选择值匹配的音符。我不知道如何做到这一点，因为可能有多个相同日期的笔记。

Code:

＆＃13;
＆＃13; 
var noteCount = 0;
addNote = function(style) {

  const notesBox = document.getElementById('notesBox');
  var noteBoxes = document.createElement('div');
      textarea = document.createElement('textarea'),
      remove = document.createElement('button'),
      today = new Date();

  var txtElement = document.createElement('p');
  var dateString = '' + today.toLocaleDateString() + ' ' + today.getHours() + ':' + today.getMinutes();
      txtElement.innerHTML = dateString;
      txtElement.setAttribute('class', style);
      txtElement.className = 'dateTxt';
      txtElement.setAttribute('id', style);
      txtElement.id = 'note ' + noteCount + ' date';
      txtElement.setAttribute('data-month', today.getMonth() + 1);
      txtElement.setAttribute('data-year', today.getFullYear());
  // div that holds each note and remove button and date
  notesBox.appendChild(noteBoxes);
  noteBoxes.setAttribute('class', style);
  noteBoxes.className = 'noteBoxes';
  noteBoxes.setAttribute('id', style);
  noteBoxes.id = 'note box ' + noteCount;
  noteBoxes.appendChild(txtElement);
  noteBoxes.appendChild(textarea);
  noteBoxes.appendChild(remove);

  // note that is added
  textarea.setAttribute('class', style);
  textarea.className = 'notesE';
  textarea.setAttribute('id', style);
  textarea.id = 'note' + noteCount;

  // button to remove note
  remove.setAttribute('class', style);
  remove.className = 'removeNote';
  remove.setAttribute('id', style);
  remove.id = '-Note' + noteCount;
  remove.onclick = function () {
    // confirm alert dialog
    // deletes the note if user selects 'OK'
    if (confirm("Are you sure you want to delete this note?") == true) {
      // removes the noteBoxes div of which the button clicked is in.
      this.parentElement.remove();
    }
  }
  noteCount++;
  console.log(textarea.id);


    var month = document.getElementById('selectMonth');
    var year = document.getElementById('selectYear');
    var searchDate = document.getElementById('searchDate');


    searchDate.onclick = function () {
      var currentMonth = txtElement.getAttribute('data-month');
      var currentYear = txtElement.getAttribute('data-year');
      if (currentMonth === month.value & currentYear === year.value) {
        // ones that match stay, if not they are not displayed.
        
        console.log('found date');
      }
      else {
        // if note with selected date is not found, display this message
        var mess = document.getElementById('Message');
        mess.innerHTML = 'No notes were found for that date.';
        setTimeout(function(){
          mess.remove();
        }, 5000);
      }

    }

}
＆＃13; 
<div id="custNotes" style="width: 550px; margin: 0 auto;">
          <h3><!-- Customer Value--> Notes</h3>
          <button class="options" onclick="addNote()" style="margin-bottom: 10px;">add</button>
          <select id="selectMonth">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            <option>6</option>
            <option>7</option>
            <option>8</option>
            <option>9</option>
            <option>10</option>
            <option>11</option>
            <option>12</option>
          </select>
          <select id="selectYear">
            <option>2017</option>
            <option>2018</option>
          </select>
          <button onclick="dateSearch()" id="searchDate">search</button>
          <p id="Message"></p>
          <div class="notesScroll"  style="width: 550px; background-color: #606060; margin: 0 auto;">
            <div id="notesBox" style="padding: 10px; width: 510px;">
              <div id="noteBoxes">
              </div>
            </div>
          </div>
        </div>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

你需要改变的事情：

  • 由于有多个音符，您需要一个循环来迭代每个音符以准确记录该日期的音符数。

var elements = document.getElementsByClassName('dateTxt'); for (var i = 0; i < elements.length; ++i) { var item = elements[i]; item.parentElement.style.background="#606060"; ...

  • 而不是实际mess.remove()的setTimeout上的deletes the element，它会在您下次尝试搜索时显示错误而无法显示相应的消息，我们设置 innerHTML为“”。

    mess.innerHTML = ""

  • 要突出显示匹配的注释，只需将其添加到匹配的if条件：

    item.parentElement.style.background="green";

  • 您可能还应该从searchDate容器中删除onclick="dateSearch()"，因为如果没有添加备注，则会出错。无论如何你正在使用searchDate.onclick。

var noteCount = 0;
addNote = function(style) {

  const notesBox = document.getElementById('notesBox');
  var noteBoxes = document.createElement('div');
  textarea = document.createElement('textarea'),
    remove = document.createElement('button'),
    today = new Date();

  var txtElement = document.createElement('p');
  var dateString = '' + today.toLocaleDateString() + ' ' + today.getHours() + ':' + today.getMinutes();
  txtElement.innerHTML = dateString;
  txtElement.setAttribute('class', style);
  txtElement.className = 'dateTxt';
  txtElement.setAttribute('id', style);
  txtElement.id = 'note ' + noteCount + ' date';
  txtElement.setAttribute('data-month', today.getMonth() + 1);
  txtElement.setAttribute('data-year', today.getFullYear());
  // div that holds each note and remove button and date
  notesBox.appendChild(noteBoxes);
  noteBoxes.setAttribute('class', style);
  noteBoxes.className = 'noteBoxes';
  noteBoxes.setAttribute('id', style);
  noteBoxes.id = 'note box ' + noteCount;
  noteBoxes.appendChild(txtElement);
  noteBoxes.appendChild(textarea);
  noteBoxes.appendChild(remove);

  // note that is added
  textarea.setAttribute('class', style);
  textarea.className = 'notesE';
  textarea.setAttribute('id', style);
  textarea.id = 'note' + noteCount;

  // button to remove note
  remove.setAttribute('class', style);
  remove.className = 'removeNote';
  remove.setAttribute('id', style);
  remove.id = '-Note' + noteCount;
  remove.onclick = function() {
    // confirm alert dialog
    // deletes the note if user selects 'OK'
    if (confirm("Are you sure you want to delete this note?") == true) {
      // removes the noteBoxes div of which the button clicked is in.
      this.parentElement.remove();
    }
  }
  noteCount++;
  console.log(textarea.id);


  var month = document.getElementById('selectMonth');
  var year = document.getElementById('selectYear');
  var searchDate = document.getElementById('searchDate');

  searchDate.onclick = function() {
    var elements = document.getElementsByClassName('dateTxt');
    for (var i = 0; i < elements.length; ++i) {
      var item = elements[i];
      item.parentElement.style.background="#606060";
      var currentMonth = item.getAttribute('data-month');
      var currentYear = item.getAttribute('data-year');
      if (currentMonth === month.value && currentYear === year.value) {
        // ones that match stay, if not they are not displayed.
        item.parentElement.style.background="green";
        console.log('found date');
      } else {
        // if note with selected date is not found, display this message
        var mess = document.getElementById('Message');
        mess.innerHTML = 'No notes were found for that date.';
        setTimeout(function() {
          mess.innerHTML = "";
        }, 5000);
      }
    }

  }


}
<div id="custNotes" style="width: 550px; margin: 0 auto;">
  <h3>
    <!-- Customer Value-->Notes</h3>
  <button class="options" onclick="addNote()" style="margin-bottom: 10px;">add</button>
  <select id="selectMonth">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            <option>6</option>
            <option>7</option>
            <option>8</option>
            <option>9</option>
            <option>10</option>
            <option>11</option>
            <option>12</option>
          </select>
  <select id="selectYear">
            <option>2017</option>
            <option>2018</option>
          </select>
  <button id="searchDate">search</button>
  <p id="Message"></p>
  <div class="notesScroll" style="width: 550px; background-color: #606060; margin: 0 auto;">
    <div id="notesBox" style="padding: 10px; width: 510px;">
      <div id="noteBoxes">
      </div>
    </div>
  </div>
</div>

答案 1 :(得分：0)

使用data-*标记每个记事，当您搜索时选择与该标记匹配的所有记事。

  

data- *属性用于存储页面或应用程序专用的自定义数据。

以下是一个例子;

＆＃13;
＆＃13; 
function dateSearch() {
	var year_el = document.getElementById("selectYear");
  var month_el = document.getElementById("selectMonth");
	var year_val = year_el.options[year_el.selectedIndex].value;
	var month_val = month_el.options[month_el.selectedIndex].value;
  
  var search_val = month_val + '/' + year_val;

	document.querySelectorAll('[data-date]').forEach(function (element) {
		if (element.getAttribute('data-date').indexOf(search_val) !== -1) {
			element.classList.add('grey');
		} else {
			element.classList.remove('grey');
		}
	});
}
＆＃13; 
.yellow {
    background-color: yellow;
}
.green {
    background-color: green;
}
.pink {
    background-color: pink;
}
.red {
    background-color: red;
}
.grey {
    background-color: grey;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<select id="selectMonth">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
    <option>11</option>
    <option>12</option>
</select>
<select id="selectYear">
    <option>2017</option>
    <option>2018</option>
    <option>2019</option>
</select>
<button onclick="dateSearch()" id="searchDate">search</button>
<div class="row">
    <div class="col-md-3 yellow" data-date="22/12/2017">
        <p>22/12/2017</p>
    </div>
    <div class="col-md-3 pink" data-date="22/12/2018" >
        <p>22/12/2018</p>
    </div>
    <div class="col-md-3 green" data-date="22/12/2019" >
        <p>22/12/2019</p>
    </div>
    <div class="col-md-3 red" data-date="22/12/2017" >
        <p>22/12/2017</p>
    </div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题