Question

3个弹出窗口的3个脚本，我几乎可以肯定有更好的方法来构建这些脚本并将3个脚本合为一个，从而实现一次只打开一个弹出窗口的结果。欢迎所有建议。

问题

当一个弹出窗口打开时，另一个弹出窗口打开，这不是预期的

上下文代码

<div class="col-sm-4 column">
            <div class="popup-trigger">
                <img src="AW16/pages/JA2305_s02-184.jpg?$staticlink$" alt="The Campaign: AW16" class="img-responsive">
            </div>
                <div class="popup-new" >                    
      <span class="popup-btn-close">X</span>
    </div>                      
    </div>

    <div class="col-sm-4 column">
            <div class="popup-trigger-b">         
                <img src="AW16/pages/JA2305_s01-034.jpg?$staticlink$" alt="The interview: Sam Rollinson" class="img-responsive">
            </div>
               <div class="popup-new-b" style="display:none">           
      <span class="popup-btn-close">X</span>
     </div>                    
    </div>

    <div class="col-sm-4 column">
            <div class="popup-trigger-c">      

                <img src="AW16/pages/JA2305_s04-013.jpg?$staticlink$" alt="Tried & Tested: The Shirt Dress" class="img-responsive">
            </div>
               <div class="popup-new-c" style="display:none">          
      <span class="popup-btn-close">X</span>
    </div>

<script>
$(document).ready(function () {
$(".popup-trigger").click(function () {
$(".popup-new").fadeIn(300);

});

$(".popup-new > span, .popup-new").click(function () {
$(".popup-new").fadeOut(300);
});
});
</script>

<script>
$(document).ready(function () {
$(".popup-trigger-b").click(function () {
$(".popup-new-b").fadeIn(300);

});

$(".popup-new-b > span, .popup-new-b").click(function () {
$(".popup-new-b").fadeOut(300);
});
});
</script>

<script>
$(document).ready(function () {
$(".popup-trigger-c").click(function () {
$(".popup-new-c").fadeIn(300);

});

$(".popup-new-c > span, .popup-new-c").click(function () {
$(".popup-new-c").fadeOut(300);
});
});
</script>

Answer 1

你可以使用CSS选择器（在$（''）内工作）和jQuery提供的每个循环做相当多的事情。下面是一个函数的示例，它将管理3个单独段落标记的淡入和淡出。

https://jsfiddle.net/oo80eqc4/3/

$("[class^='popup-trigger-']").on('click', function() {
  var letter = ($(this).attr('class'))
  var combined = ".popup-new-" + letter.substr(letter.length - 1)
  $("[class^='popup-new-']").not(combined).each(function() {
     $(this).fadeOut(300); 
  });
  $(combined).fadeToggle(300)
});

以下选择类以开头的所有元素'popup-trigger-'。

$("[class^='popup-trigger-']")

在这个例子中，我还使用了不排除当前“弹出窗口”。

此代码示例具有可扩展性，因为它与您的编号无关。我没有对它进行过广泛的测试，但我希望这是你所追求的。

我认为我的代码在您的示例中不能直接使用，但我已尽可能明确地帮助您。 Here is a good resource用于具有简短解释的CSS选择器。希望这会有所帮助。

显示jQuery / JS多个弹出窗口时出错

1 个答案: