Question

我正在使用搜索功能突出显示不同章节中的文本（功能2）。并行地，此文本的大部分存储在div中，称为content，以方便阅读。您可以切换这些div以阅读文本（功能1）。

通过功能2找到文本后，将无法在本章中切换文本。我想这与在功能1中使用“ this”（如果删除此功能有效）或处理程序（如果在live中单击live之前添加live起作用，但不推荐使用live并且重新放置“ on”不起作用有关）。

// function 1 : toggle content when clicking the button
$(".chapter button").on('click',function(f) { //live deprecated to be replaced
  f.preventDefault();
  var id = $(this).attr('id');
  console.log(id)
  $('#' + id + '+*').toggle();
  // toggle is not working when highlight function located in item in this specific chapter
});

// function 2 : highlight content
$('#monForm').submit(function(e) {
  e.preventDefault();
  console.log('submitted')

  // clear form
  var str = $('#valeurForm').val();
  $('#valeurForm').val("");
  console.log(str);

  // highlight
  var strCut = str.split(' ');
  for (i = 0; i < strCut.length; i++) {
    // grey chapter where the word is located
    $("div[class='chapter']:contains(" + strCut[i] + ")").css("color", "#929aab");
    // and highlight in red specific word
    // but i want to highlight all occurences of the word in this chapter ? how can I define index d ?
    $("div[class='chapter']:contains(" + strCut[i] + ")").each(function(d) {
      $(this).html($(this).html().replace(strCut[i], '<font color="red">$&</font>'));
    });
  };

});

<head>
  <meta charset="utf-8">
  <style>
    .content {
      display: none;
    }
  </style>
</head>

<body>

  <form name="search" id="monForm">
    <input type="text" id="valeurForm">
  </form>
  <div class="chapter">
    chapter 1
    <button type="button" id="chapter1">Display content</button>
    <div class="content">
      content chapter1
    </div>
  </div>
  <br>
  <div class="chapter">
    chapter 2
    <button type="button" id="chapter2">Display content</button>
    <div class="content">
      content chapter2
    </div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <!-- jQuery est inclus ! -->
</body>

Answer 1

问题出在您的$(this).html()上。您所做的.replace会删除按钮的事件侦听器，因为它会修改DOM。我没有使用整个.html()，而是使用.children()，然后仅替换了它的文本。

关于替换所有出现的chapter单词，您可以使用正则表达式。使用字符串将仅替换字符串的第一个匹配项。使用正则表达式，您可以替换所有它们。

// function 1 : toggle content when clicking the button
$(".chapter button").click(function(f) { //live deprecated to be replaced
  f.preventDefault();
  var id = $(this).attr('id');
  $('#' + id + '+*').closest('.content').toggle();
  // toggle is not working when highlight function located in item in this specific chapter
});

// function 2 : highlight content
$('#monForm').submit(function(e) {
  e.preventDefault();
  console.log('submitted')

  // clear form
  var str = $('#valeurForm').val();
  $('#valeurForm').val("");
  
  // highlight
  var strCut = str.split(' ');
  for (i = 0; i < strCut.length; i++) {
    // grey chapter where the word is located
    $("div[class='chapter']:contains(" + strCut[i] + ")").css("color", "#929aab");
    // and highlight in red specific word
    $("div[class='chapter']:contains(" + strCut[i] + ")").each(function(d) {
      var regex = new RegExp(strCut[i],"g")
      $(this).children().each(function (index,element) {
      const text = $(element).html().replace(regex,'<font color="red">$&</font>')
      $(element).html(text)
      })
    });
  };

});

<head>
  <meta charset="utf-8">
  <style>
    .content {
      display: none;
    }
  </style>
</head>

<body>
  <form name="search" id="monForm">
    <input type="text" id="valeurForm">
  </form>
  <div class="chapter">
    chapter 1
    <button type="button" id="chapter1">Display content</button>
    <div class="content">
      content chapter1 and the second ocurrence of chapter also highlighted
    </div>
  </div>
  <br>
  <div class="chapter">
    chapter 2
    <button type="button" id="chapter2">Display content</button>
    <div class="content">
      content chapter2
    </div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <!-- jQuery est inclus ! -->
</body>

编辑

对于错误我还不太清楚，对不起，我已经注意到了正确的解决方案。关键是，我没有更改父元素，而是更改了子元素的文本。当您更改整个html时，将按钮的侦听器再次添加到html中时，便会删除它，这就是为什么无法切换div的原因。

jQuery：在使用搜索功能后如何切换div？

1 个答案: