Question

我正在尝试构建一个仪表板UI，我希望能够关闭一些面板。我试过几种方法来使用＆＃34;这个＆＃34;关键字，以避免硬编码一切，但无法弄清楚。我确信必须有一种更有效的方法来完成我的工作，但我确实实现了我的目标。

任何人都能告诉我我能做些什么不同吗？

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然后淡出最近部分的示例。将事件绑定到类而不是几个id更容易。

由于我们正在收听某个事件，因此我们可以在事件监听器中使用$(this)。它将返回被单击的元素（在此示例中为锚点）。当我们得到被点击的元素时，我们可以使用[.closest][1]来查找基于类的父元素。然后我们可以使用fadeOut()。

＆＃13;

$(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();
        });
    });

＆＃13;

<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>

＆＃13;

Answer 2

我的建议是：

$(function () {
  
  $('div a[id^="close"]').on('click', function (e) {
    var idNumber = this.id.split('').pop();
    $(this).closest('#div' + idNumber).fadeOut();
  });
  
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.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"><i class="fa fa-close">X</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>

jQuery：带有关闭按钮的fadeOut <div>元素

3 个答案: