javascript - jQuery:带有关闭按钮的 fadeOut 元素

Question

我正在尝试构建一个仪表板 UI，我希望能够在其中关闭一些面板。我尝试了几种方法来使用“this”关键字来避免对所有内容进行硬编码，但无法弄清楚。我确信必须有一种更有效的方法来完成我所做的事情，但我确实实现了我的目标。

任何人都可以告诉我我可以做些什么不同的事情吗？

HTML:

<div class="content-section col-sm-6 col-md-5" id="div1">
   <div class="cs-header">
      <p>Header<a href="#" class="btn-close right" id="close1"><i class="fa fa-close"></i></a></p>
  </div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex hic ipsam voluptates! Harum odio porro temporibus nisi, amet maiores, rem nostrum sit vitae inventore officiis vel eius soluta atque velit.</p>
</div>
<div class="content-section col-sm-6 col-md-5 col-md-offset-2" id="div2">
   <div class="cs-header">
      <p>Header<a href="#" class="btn-close right" id="close2"><i class="fa fa-close"></i></a></p>
   </div>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore numquam, perferendis impedit, dolores quibusdam blanditiis id ipsum delectus minus eligendi repudiandae amet, velit voluptatum perspiciatis pariatur dicta aut mollitia cupiditate.</p> 
</div>
<div class="content-section col-sm-6 col-md-3 col-centered" id="div3">
   <div class="cs-header">
      <p>Header<a href="#" class="btn-close right" id="close3"><i class="fa fa-close"></i></a></p>
   </div>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut doloremque magnam quo quisquam, nesciunt, excepturi recusandae harum nisi? Ipsum vel explicabo ab, saepe sed animi ex quas. Voluptate, dicta, et.</p> 
</div>
<div class="content-section col-sm-6 col-md-4 col-md-offset-1 col-centered" id="div4">
   <div class="cs-header">
      <p>Header<a href="#" class="btn-close right" id="close4"><i class="fa fa-close"></i></a></p>
   </div>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis dolorum dicta molestias velit, quaerat cum reiciendis commodi rem alias maiores, quis optio quas quasi. Dolorem magnam laborum, nesciunt velit nobis?</p>
</div>
<div class="content-section col-sm-6 col-md-3 col-md-offset-1 col-centered" id="div5">
   <div class="cs-header">
      <p>Header<a href="#" class="btn-close right" id="close5"><i class="fa fa-close"></i></a></p>
   </div>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae est quibusdam, repellendus quae ullam fugiat quos illum enim sit sunt itaque fugit alias ducimus soluta nihil, tenetur laudantium id, numquam.</p>
</div>

jQuery:

$(document).ready(function() {
        $('div').on('click', '#close1', function () {
            $('#div1').fadeOut();
        });

        $('div').on('click', '#close2', function () {
            $('#div2').fadeOut();
        });

        $('div').on('click', '#close3', function () {
            $('#div3').fadeOut();
        });

        $('div').on('click', '#close4', function () {
            $('#div4').fadeOut();
        });

        $('div').on('click', '#close5', function () {
            $('#div5').fadeOut();
        });
    });

Answer 1

下面是一个示例，其中用户单击 .btn-close 然后淡出最近的部分。将一个事件绑定(bind)到一个类而不是几个 id 上要容易得多。

因为我们正在监听一个事件，所以我们可以在事件监听器中使用$(this)。它将返回被点击的元素(在这个例子中是 anchor )。当我们得到被点击的元素时，我们可以使用 [.closest][1] 来根据类找到父元素。然后我们可以使用fadeOut()。

$(document).ready(function() {
     // Listen to clicks on btn-close
        $('.content-section').on('click', '.btn-close', function () {
            // Get closest content-section and fade it out.
            // $(this) will be the anchor with the class btn-close.
            $(this).closest('.content-section').fadeOut();
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content-section col-sm-6 col-md-5" id="div1">
                   <div class="cs-header"><p>Header<a href="#" class="btn-close right" id="close1"><i class="fa fa-close">X</i></a></p></div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex hic ipsam voluptates! Harum odio porro temporibus nisi, amet maiores, rem nostrum sit vitae inventore officiis vel eius soluta atque velit.</p>
                </div>
                <div class="content-section col-sm-6 col-md-5 col-md-offset-2" id="div2">
                   <div class="cs-header"><p>Header<a href="#" class="btn-close right" id="close2">X<i class="fa fa-close"></i></a></p></div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore numquam, perferendis impedit, dolores quibusdam blanditiis id ipsum delectus minus eligendi repudiandae amet, velit voluptatum perspiciatis pariatur dicta aut mollitia cupiditate.</p> 
                </div>
                <div class="content-section col-sm-6 col-md-3 col-centered" id="div3">
                   <div class="cs-header"><p>Header<a href="#" class="btn-close right" id="close3"><i class="fa fa-close">X</i></a></p></div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut doloremque magnam quo quisquam, nesciunt, excepturi recusandae harum nisi? Ipsum vel explicabo ab, saepe sed animi ex quas. Voluptate, dicta, et.</p> 
                </div>
                <div class="content-section col-sm-6 col-md-4 col-md-offset-1 col-centered" id="div4">
                   <div class="cs-header"><p>Header<a href="#" class="btn-close right" id="close4"><i class="fa fa-close">X</i></a></p></div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis dolorum dicta molestias velit, quaerat cum reiciendis commodi rem alias maiores, quis optio quas quasi. Dolorem magnam laborum, nesciunt velit nobis?</p>
                </div>
                <div class="content-section col-sm-6 col-md-3 col-md-offset-1 col-centered" id="div5">
                   <div class="cs-header"><p>Header<a href="#" class="btn-close right" id="close5"><i class="fa fa-close">X</i></a></p></div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae est quibusdam, repellendus quae ullam fugiat quos illum enim sit sunt itaque fugit alias ducimus soluta nihil, tenetur laudantium id, numquam.</p>
                </div>