Question

我有3个单独的脚本用于3个弹出窗口，我确定有更好的方法将这些脚本组合成一个脚本吗？我也希望一次只能打开一个弹出窗口，所以如果.popup-new处于活动状态，我点击打开.popup-new-b然后.popup-new会自动关闭。任何帮助将非常感激。

didChangeObject:

Answer 1

因为我看不到您的HTML。我添加了一些CSS。我希望这就是你要找的东西。当然，我可以要求澄清，但我没有足够的声誉来添加评论:(

＆＃13;

$('button').click(function(){
    $('.popup').removeClass('popped');
    $('#popup-new'+$(this).attr('class')).addClass('popped');
 });

＆＃13;

.popup{
   position:fixed;
   width:70%;
   height:70%;
   top:50%;
   left:50%;
   margin-top:-5%;
   margin-left:-35%;
   background-color:#ccc;
   z-index:100;
   display:none;
}
.popped{
   display:block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="popup-new" class="popup">HI I am POPUP NEW</div>
<div id="popup-new-b" class="popup">HI I am POPUP-NEW-B</div>
<div id="popup-new-c" class="popup">HI I am POPUP-NEW-C</div>

<button class="">Pop up New</button>
<button class="-b">Pop up New B</button>
<button class="-c">Pop up New C</button>

＆＃13;

Answer 2

你可以这样做：

const x = condition ? 5 : 10;

通常，只要有想要重复的代码，就可以使用数组或对象。

请注意，以这种方式将参数传递给事件处理程序仅适用于jQuery;在原始JavaScript中，您将不得不使用闭包。

您甚至可以使用另一个数组和循环来简化三行的两个块（见下文）。

另请注意，正如@ 404UserNotFound所写，如果所有弹出窗口共享一个公共类，您可以简化这些行：

popups = ['.popup-new','.popup-new-b','.popup-new,-c']

// Pass an additional parameter to popup_click, which is the index of the popup in the array
$('.popup-trigger').click({popup: 0}, popup_click);
$('.popup-trigger-b').click({popup: 1}, popup_click);
$('.popup-trigger-c').click({popup: 2}, popup_click);

function popup_click(event) {
    // Here write the code to open the popup
    // You can access the popup through $(popups[event.data.popup])
    for (var i in popups) {
        if (i != event.data.popup) { // event.data.popup contains the index that we passed
            // Here write the code to close each of the other popups
            // Access them through $(popups [i])
        }
    }
}

$('html').click(function() {
    for (var i in popups) {
        $(popups[i]).hide();
    }
});

$('.popup-btn-close').click(function(e) {
    for (var i in popups) {
        $(popups[i]).hide();
    }
});

$('.popup-new').click(stop_propagation);
$('.popup-new-b').click(stop_propagation);
$('.popup-new-c').click(stop_propagation);

function stop_propagation(e) {
    e.stopPropagation();
}

然后把它们变成：

for (var i in popups) {
    $(popups[i]).hide();
}

这使您无法使用这个紧凑的代码：

$('.yourClassNameHere').hide(); // Will select all the elements of the right class

最后，如果所有的弹出窗口和触发器总是以相同的方式命名，并带有后缀，你可以进一步压缩它（使用一些技巧来节省一些空间）：

popups = ['.popup-new', '.popup-new-b', '.popup-new,-c']
popup_triggers = ['.popup-trigger', '.popup-trigger-b', '.popup-trigger-c']

// Pass an additional parameter to popup_click, which is the index of the popup in the array
for (i in popup_triggers) {
    $(popup_triggers[i]).click({popup: i}, popup_click);
}

function popup_click(event) {
    // Here write the code to open the popup
    // You can access the popup through $(popups[event.data.popup])
    for (var i in suffixes) {
        if (i != event.data.popup) { // event.data.popup contains the index that we passed
            // Here write the code to close each of the other popups
            // Access them through $(popups [i])
        }
    }
}

$('html').click(function() {
    $('.yourClassNameHere').hide();
});

$('.popup-btn-close').click(function(e) {
    $('.yourClassNameHere').hide();
});

for (i in popups) {
    $(popups[i]).click(stop_propagation);
}

function stop_propagation(e) {
    e.stopPropagation();
}

suffixes = ['', '-b', '-c']

for (let i in suffixes) {
  $('.popup-trigger' + suffixes[i]).click(function(i) {
    return function(e) {
      hideAllPopups();
      $('.popup-new' + suffixes[i]).toggle();
      //e.stopPropagation(); // HERE
    }
  }(i));
}

$('.popup-btn-close').click(hideAllPopups);
//$('html').click(hideAllPopups); // HERE

function hideAllPopups() {
  $('.popup').hide();
}

// Uncomment the two lines marked "HERE" to make the popups disappear whenever you click somewhere in the page (except on the buttons)

.popup {
  margin: 20px auto;
  padding: 20px;
  background: #ccc;
  width: 30%;
  position: relative;
}

.popup-btn-close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-weight: bold;
}

.box {
  background: rgba(0,0,0,0.2);
  padding: 5px;
  background-clip: padding-box;
  text-align: center;
}

弹出javascript / Jquery - 一次只打开一个pop

2 个答案: