有没有办法将两个javascript合并在一起？

Question

我只是无法弄清楚如何将它们合并在一起，或者我总是要为我的所有弹出窗口写一个不同的？我尝试了不同的东西，但没有一个有效。

$(document).ready(function() {
    $('#trigger').click(function() {
        $('#overlay').fadeIn(300);
    });
    $('#close').click(function() {
        $('#overlay').fadeOut(300);
    });
});
$('#overlay').click(function(e) {
    if (e.target == this) {
        if ($('#overlay').is(':visible')) {
            $('#overlay').fadeOut(300);
        }
    }
});

$(document).ready(function() {
    $('#trigger2').click(function() {
        $('#overlay2').fadeIn(300);
    });
    $('#close2').click(function() {
        $('#overlay2').fadeOut(300);
    });
});
$('#overlay2').click(function(e) {
    if (e.target == this) {
        if ($('#overlay2').is(':visible')) {
            $('#overlay2').fadeOut(300);
        }
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- begin snippet: js hide: false console: true babel: false -->

Answer 1

如果您使用classnames或data- *属性，那很容易。

<div class="overlay" data-id="1"></div>
<div class="overlay" data-id="2"></div>

然后JS：

$('.trigger').on('click', function() {
     var number = $(this).dataset().id; 
     // also valid:
     var number = $(this).attr('data-id');
     $('.overlay[data-id="' + number + "').fadeOut();
});

尝试类似的东西。