在textArea中使用完美的滚动条插件

Question

朋友您好我想在Angular的textarea中使用完美的滚动条请帮助我。

<div>
                <textarea class="form-control textarea-box comment-box" maxlength="1000" [formControl]="form.controls['comment']" ></textarea>
                </div>
                <span class="maxTxt"><strong>Note:</strong> {{showMessage}}</span>

Answer 1

您只能定位h2的直接子项#faqs，从而排除那些aside的孩子，#faqs > h2：

（我用背景颜色替换了.plus和.minus样式，因此可以在SO上看到更改

$("#faqs > h2").addClass('plus');
$("div").addClass('close');
$("#faqs > h2").click(function() {
  $(this).toggleClass('minus');
}); // end click
$("div").click(function() {
  $(this).toggleClass('open');
}); // end click

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 100%;
  margin: 20px;
  padding: 10px;
}

section {
  padding: 15px 25px;
  width: 650px;
  margin-top: 20px;
  margin-left: 25px;
}

h1 {
  font-size: 150%;
}

h2 {
  font-size: 120%;
  padding: .25em 0 .25em 25px;
  cursor: pointer;
}


/* classes that you will use */

.plus {
  background-color: yellow
}

.minus {
  background-color: red
}

.close {
  display: none;
}

.open {
  display: block;
}

ul {
  padding-left: 45px;
}

li {
  padding-bottom: .25em;
}

p {
  padding-bottom: .25em;
  padding-left: 25px;
}

aside {
  margin-top: 50px;
}

aside h2,
header h2 {
  cursor: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="faqs">

  <h2>What is jQuery?</h2>
  <div>
    <p>jQuery is a library of the JavaScript functions that you're most likely to need as you develop web sites.
    </p>
  </div>

  <h2>Why is jQuery becoming so popular?</h2>
  <div>
    <p>Three reasons:</p>
    <ul>
      <li>It's free.</li>
      <li>It lets you get more done in less time.</li>
      <li>All of its functions are cross-browser compatible.</li>
    </ul>
  </div>

  <h2>Which is harder to learn: jQuery or JavaScript?</h2>
  <div>
    <p>For most functions, jQuery is significantly easier to learn and use than JavaScript. But remember that jQuery is JavaScript.
    </p>
  </div>

  <aside>
    <h2>Resources:</h2>
    <div>
      <p>jQuery Website - <a href="http://jquery.com" target="_blank">http://jquery.com</a>
      </p>
    </div>
  </aside>
</section>

</body>

</html>

Answer 2

只需使用find()找到H2内的#faqs元素即可。对于click事件，请将H2 #faqs的{​​{1}}元素点击事件绑定到$("#faqs").on("click", "h2",function(){ });

$(document).ready(function(){
$("#faqs").find("h2").addClass('plus');
$("#faqs").find("div").addClass('close');
$("#faqs").on("click", "h2", function(){
    $(this).toggleClass('minus');
    }); // end click
    $("div").click(function(){
   $(this).toggleClass('open');
}); // end click


}); //end ready;

* {
        margin: 0;
        padding: 0;
    }

    body {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 100%;
        margin: 20px;
        padding: 10px;
    }

    section {
        padding: 15px 25px;
        width: 650px;
        margin-top: 20px;
        margin-left: 25px;
    }

    h1 {
        font-size: 150%;
    }


    h2 {
        font-size: 120%;
        padding: .25em 0 .25em 25px;
        cursor: pointer;
    }


    /* classes that you will use */

    .plus {
        background: url(plus.png) no-repeat left center;
        background-color: lightblue;
    }

    .minus {
        background: url(minus.png) no-repeat left center;
        background-color: yellow;
    }

    .close {
        display: none;
    }

    .open {
        display: block;
    }

    ul {
        padding-left: 45px;
    }

    li {
        padding-bottom: .25em;
    }

    p {
        padding-bottom: .25em;
        padding-left: 25px;
    }

    aside {
        margin-top: 50px;
    }

    aside h2, header h2{
        cursor: auto;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <h1>jQuery FAQs</h1>
  <h2>Frequently Asked Questions</h2>
</header>

<section id="faqs">

    <h2>What is jQuery?</h2>
    <div>
        <p>jQuery is a library of the JavaScript functions that you're most 
         likely to need as you develop web sites.
        </p>
    </div>

    <h2>Why is jQuery becoming so popular?</h2>
    <div>
        <p>Three reasons:</p>
        <ul>
            <li>It's free.</li>
            <li>It lets you get more done in less time.</li>
            <li>All of its functions are cross-browser compatible.</li>
        </ul>
    </div>

    <h2>Which is harder to learn: jQuery or JavaScript?</h2>
    <div>
        <p>For most functions, jQuery is significantly easier to learn and 
            use than JavaScript. But remember that jQuery is JavaScript.
        </p>
    </div>

    <aside>
      <h2>Resources:</h2>
        <div>
            <p>jQuery Website - <a href="http://jquery.com" 
             target="_blank">http://jquery.com</a>
            </p>
          </div>
           </aside>
         </section>

Answer 3

使用document.querySelectorAll("#faqs >h2");这将获得id为常见问题并将选择直接h2孩子的元素

var l = document.querySelectorAll("#faqs >h2");
// just for testing
l.forEach(function(item) {
  item.classList.add("test")
})

.test {
  color: green;
}

<header>
  <h1>jQuery FAQs</h1>
  <h2>Frequently Asked Questions</h2>
</header>

<section id="faqs">

  <h2>What is jQuery?</h2>
  <div>
    <p>jQuery is a library of the JavaScript functions that you're most likely to need as you develop web sites.
    </p>
  </div>

  <h2>Why is jQuery becoming so popular?</h2>
  <div>
    <p>Three reasons:</p>
    <ul>
      <li>It's free.</li>
      <li>It lets you get more done in less time.</li>
      <li>All of its functions are cross-browser compatible.</li>
    </ul>
  </div>

  <h2>Which is harder to learn: jQuery or JavaScript?</h2>
  <div>
    <p>For most functions, jQuery is significantly easier to learn and use than JavaScript. But remember that jQuery is JavaScript.
    </p>
  </div>

  <aside>
    <h2>Resources:</h2>
    <div>
      <p>jQuery Website - <a href="http://jquery.com" target="_blank">http://jquery.com</a>
      </p>
    </div>
  </aside>
</section>

Answer 4

我使HTML更简单如下：

<section id="faqs">
  <h2>
  Header 1
  </h2>
  <div>
    <p>
      Paragraph 1
    </p>
  </div>
  <h2>
  Heading 2
  </h2>
  <div>
    <p>
    Paragraph 2
    </p>
  </div>
  <aside>
    <h2>
    Heading 3
    </h2>
    <div>
      <p>
      Paragraph 3
      </p>
    </div>
  </aside>
</section>

我在css中创建了一个如下的类，以便在以下情况下明确选择了哪个h2：

.bg-color{
  background-color:yellow;
}

我使用以下jquery在给定的HTML中选择不同的h2：

let heading1 = $("section#faqs > h2:first-child");
heading1.addClass("bg-color");
alert(heading1.text());
let heading2 = $("section#faqs div").next("h2");
heading2.addClass("bg-color");
alert(heading2.text());
let heading3 = $("section#faqs aside h2");
heading3.addClass("bg-color");
alert(heading3.text());

这是显示结果的小提琴：

https://jsfiddle.net/thisisdg/dzer6nv9/1/

我希望这会有所帮助。