Question

我在codepen中找到了代码，并进行了一些更改。在这里搜索代码，我只想搜索多个div。如你所见.question和.answer divs。现在代码对我有用，但我想在搜索中添加.answer部分。

我尝试写多个选择$（[＆＃34;＆＃34;]，[＆＃34;＆＃34;]），但对我没有用。

我是怎么写的？你能告诉我一些方法吗？

＆＃13;

$(".open").click(function() {
  var container = $(this).parents(".topic");
  var answer = container.find(".answer");
  var trigger = container.find(".faq-t");
  

  answer.slideToggle(200);

  if (trigger.hasClass("faq-o")) {
    trigger.removeClass("faq-o");
  } else {
    trigger.addClass("faq-o");
  }

  if (container.hasClass("expanded")) {
    container.removeClass("expanded");
  } else {
    container.addClass("expanded");
  }
});



jQuery(document).ready(function() {
  $('.question').each(function() {
    $(this).attr('data-search-term', $(this).text().toLowerCase() + $(this).find("ptag").text().toLowerCase());

  });

  $('.live-search-box').on('keyup', function() {

    var searchTerm = $(this).val().toLowerCase();

    $('.question').each(function() {

      if ($(this).filter
('[data-search-term *= ' + searchTerm + ']').length > 0 || searchTerm.length < 1) {
        $(this).parent().parent().show();
      } else {
        $(this).parent().parent().hide();
      }

    });

  });




$('#control').keyup(function() { 
if ($(this).val().length == 0) { 
$('.show_hide').hide(); } 
else { 
$('.show_hide').show();
 }
 }).keyup();

$('#control').keyup(function() { 
if ($(this).val().length == 0) { 
$('main').css("margin-top","10%"); } 
else { 
$('main').css("margin-top","30px");
 }
 }).keyup();



});

＆＃13;

@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500);
body {
  font-family: 'Roboto', sans-serif;
  background-color: #f5f5f5;
  color: #444;
}

main {
  display: block;
  position: relative;
  box-sizing: border-box;
  border-radius: 15px;
  padding: 30px;
  width: 60%;
  background-color: #fff;
  margin: 0 auto;
  margin-top box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
}

.live-search-box {
  width: 100%;
  display: block;
  padding: 1em;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #3498db;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

h1 {
  padding-left: 20px;
  padding-right: 20px;
  font-size: 32px;
  font-weight: 300;
}

.topic {
  padding: 20px;
  padding-top: 0px;
  padding-bottom: 0px;
  border-bottom: solid 1px #ebebeb;
}

.open {
  cursor: pointer;
  display: block;
  padding: 0px;
}

.open:hover {
  opacity: 0.7;
}

.expanded {
  background-color: #f5f5f5;
  transition: all .3s ease-in-out;
}

.ptag {
  display: none;
}

.question {
  padding-top: 30px;
  padding-right: 40px;
  padding-bottom: 20px;
  font-size: 18px;
  font-weight: 500;
  color: #526ee4;
}

.answer {
  font-size: 16px;
  line-height: 26px;
  display: none;
  margin-bottom: 30px;
  text-align: justify;
  padding-left: 20px;
  padding-right: 20px;
}

.faq-t {
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  display: inline-block;
  float: right;
  position: relative;
  top: -55px;
  right: 10px;
  width: 10px;
  height: 10px;
  background: transparent;
  border-left: 2px solid #ccc;
  border-bottom: 2px solid #ccc;
  transition: all .3s ease-in-out;
}

.faq-o {
  top: -50px;
  -moz-transform: rotate(-224deg);
  -ms-transform: rotate(-224deg);
  -webkit-transform: rotate(-224deg);
  transform: rotate(-224deg);
}

@media only screen and (max-width: 480px) {
  .faq-t {
    display: none;
  }
  .question {
    padding-right: 0px;
  }
  main {
    padding: 10px;
  }
  .answer {
    margin-bottom: 30px;
    padding-left: 0px;
    padding-right: 0px;
  }
}

＆＃13;

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>FAQ</title>
  
  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">
  





</head>
<style>

</style>
<body>
  <main>
  <h1>Frequently Asked Questions</h1>
  <input type="text" name="control" id="control" class="live-search-box" placeholder="Search!" />

<div class="show_hide">
  <div class="topic">

    <div class="open">

      <h2 class="question">1. How can i delete my complaint/comment?<span class="ptag">SIEBEL</span></h2>
      <span class="faq-t"></span>
    </div>
    <p class="answer">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div class="topic">
    <div class="open">
      <h2 class="question">2. I have posted a complaint/comment, but it doesn’t appear on the website. Why? When my complaint will be posted?
</h2><span class="faq-t"></span>
    </div>
    <p class="answer">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div class="topic">
    <div class="open">
      <h2 class="question">3. How can I edit a complaint I posted?
</h2><span class="faq-t"></span>
    </div>
    <p class="answer">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div class="topic">
    <div class="open">
      <h2 class="question">4. How can i find out personal information of another user?
</h2><span class="faq-t"></span>
    </div>
    <p class="answer">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div class="topic">
    <div class="open">
      <h2 class="question">5. How can i contact another user?
</h2><span class="faq-t"></span>
    </div>
    <p class="answer">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div class="topic">
    <div class="open">
      <h2 class="question">2. I have posted a complaint/comment, but it doesn’t appear on the website. Why? When my complaint will be posted?
</h2><span class="faq-t"></span>
    </div>
    <p class="answer">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div class="topic">
    <div class="open">
      <h2 class="question">3. How can I edit a complaint I posted?
</h2><span class="faq-t"></span>
    </div>
    <p class="answer">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div class="topic">
    <div class="open">
      <h2 class="question">4. How can i find out personal information of another user?
</h2><span class="faq-t"></span>
    </div>
    <p class="answer">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div class="topic">
    <div class="open">
      <h2 class="question">5. How can i contact another user?
</h2><span class="faq-t"></span>
    </div>
    <p class="answer">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</div>
</main>
  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
  <script  src="js/index.js"></script>



</body>
</html>

＆＃13;

Answer 1

尝试查看此页面，了解如何使用多个选择器https://api.jquery.com/multiple-selector/

Answer 2

请尝试以下代码。我添加了“数据搜索 - 术语”和“＃39;回答。

jQuery(document).ready(function () {
    $('.question,.answer').each(function () {
        $(this).attr('data-search-term', $(this).text().toLowerCase() + $(this).find("ptag").text().toLowerCase());

    });

    $('.live-search-box').on('keyup', function () {

        var searchTerm = $(this).val().toLowerCase();
        $('.question').parent().hide();
        $('.topic').each(function () {

            if ($(this).find('.question').filter('[data-search-term *= ' + searchTerm + ']').length > 0 || $(this).find('.answer').filter('[data-search-term *= ' + searchTerm + ']').length > 0) {
                $(this).show();
                $(this).find('.open').show();
            }
            else {
                $(this).hide();
            }

        });

    });




    $('#control').keyup(function () {
        if ($(this).val().length == 0) {
            $('.show_hide').hide();
            $('main').css("margin-top", "10%");
        }
        else {
            $('.show_hide').show();
            $('main').css("margin-top", "30px");
        }
    });


});

Jquery在searchTerm

2 个答案: