对于影响其他div的菜单链接的每个循环

Question

我正试图理解如何将这段代码变成一个循环，这样我就不必每次在$('.popup-[insert nr]').click中复制用于导航的新菜单链接了。此代码的目的是:单击链接、切换或将显示类添加到隐藏的div中，如果单击了其他链接，则每个显示的div都将被隐藏。

var popContent = $('.popup-1-content');
var popContent2 = $('.popup-2-content');
var popContent3 = $('.popup-3-content');
var popContent4 = $('.popup-4-content');

var popupArray = [popContent, popContent2, popContent3, popContent4];

$('.popup-1').click(function () {

    if ( popContent.hasClass("show") ) {
        popContent.removeClass("show");
    } else {
        for (var i = 0; i < popupArray.length; i++) {
           popupArray[i].removeClass("show");
        }
        popContent.addClass("show");
    }
    return false;
});

$('.popup-2').click(function () {

    if (popContent2.hasClass("show") ) {
        popContent2.removeClass("show");
    } else {
        for (var i = 0; i < popupArray.length; i++) {
           popupArray[i].removeClass("show");
        }
        popContent2.addClass("show");
    }
    return false;
});


$('.close-popup a').click(function(){
$('.popup-content').toggleClass('hide').removeClass('show');
return false;
});

Answer 1

使用更好的CSS选择器抓取所有弹出窗口。然后使用jquery的each迭代列表，并在每个列表上附加一个单击处理程序。

您正在手动切换一个类，但是JQuery有内置的toggleClass。用这个代替。在您的示例中，您说一旦一个弹出窗口更改了它的类，就希望从所有其他元素中删除该类，要做到这一点，我们可以使用jquery的.not方法，它指定获取除指定项之外的所有项，然后使用removeClass从这些元素中删除类。

var popups = $('[class$="-content"]').filter('[class^="popup-"]');

popups.each(function(index, popup) {
  $(".popup-" + (index + 1)).click(function(e) {
    $(popup).toggleClass("show");
    popups.not(popup).removeClass("show");
  });
});

​

var popups = $('[class$="-content"]').filter('[class^="popup-"]');

popups.each(function(index, popup) {
  $(".popup-" + (index + 1)).click(function(e) {
    $(popup).toggleClass("show");
    popups.not(popup).removeClass("show");
  });
});

.show {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="popup-1">toggle 1</button>
<button class="popup-2">toggle 2</button>
<button class="popup-3">toggle 3</button>
<button class="popup-4">toggle 4</button>

<div class="popup-1-content">1</div>
<div class="popup-2-content">2</div>
<div class="popup-3-content">3</div>
<div class="popup-4-content">4</div>

​

Answer 2

不看HTML结构是很难的，但是想法是为每个链接创建一个循环，并用如下所示的索引变量替换数字：

$.each('a', function(i, link) {
    $('.popup-' + i).click(function () {

        $('div').removeClass("show");
        $(this).parent.addClass("show");

        return false;
    });
});

Answer 3

更新

"...i尝试了您的代码，但是它需要进行编辑，这样它就不会针对链接下面的div，因为div位于页面的随机部分。“

更新的演示通过向每个链接添加一个data-*属性来解决前面提到的问题。单击链接后，通过使用div.pop方法将其data-idx与.pop的索引位置匹配来定位nth .eq()。下面的示例不起作用，只是强调索引号的相关部分，以显示两个值之间的相关性。

<a href='#/' class='lnk' data-idx='3'>POP3</a>

$('.pop').eq(3).addClass('show')

以下是核心代码，没有额外的实用程序或注释，浓缩和链接。

$('.lnk').on('click', function() {
  var idx = $(this).data('idx');
  $('.pop').removeClass('show').eq(idx).addClass('show');
});

 <a href='#/' class='.lnk' data-idx='0'>POP0</a>

有关完整的更新代码，请参阅下面的演示。

任何自动或手动控制的元素组(例如。滑块)在状态中交替的(例如。控制流程的最简单方法是隐藏所有元素，然后显示当前活动的元素。

演示中注释的详细信息

演示

​

/* This is just to space the links apart. Upadted to provide
|| random location for .lnk's
*/
$('a.lnk').each(function(idx, a) {
  var ran = getRandom(1, 60);
  a.style.top = (idx * ran) + 'px';
  a.style.left = (idx * ran) + 'px';
});

// Click any a.lnk...
$('a.lnk').on('click', function() {

  // Reference the div.pop the clicked link belongs to

  /* The next statement works if each popup was positioned after
  || a corresponding link. It is commented out in leiu of the 
  || uncommented statement that follows this statement.
  */ // var pop = $(this).next('div.pop');

  // Get the clicked link's data-idx number
  var idx = $(this).data('idx');

  // Gather all .pop
  var pop = $('.pop');

  // ALL .pop remove class .slow
  pop.removeClass('show');

  /* .pop will open. The specific .pop that corresponds with the
  || clicked link is determined by matching the .pop's current
  || indexed position with that of the indexed position of in     
  || $('.pop') by using the eq() method and passing data-idx
  */
  pop.eq(idx).addClass('show');

});

/* This function is not neccessary. Its purpose is to generate a
|| random number between min and max parameters (inclusive)
*/
function getRandom(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

a.lnk {
  display: inline-block;
  position: relative;
  z-index: 1;
  background:#000;
  color:gold;
  
}

.pop {
  display: none;
}

.pop.show {
  display: block;
  margin-top: 30px
}

<a href='#/' class='lnk' data-idx='0'>POP0</a>
<a href='#/' class='lnk' data-idx='1'>POP1</a>
<a href='#/' class='lnk' data-idx='2'>POP2</a>
<a href='#/' class='lnk' data-idx='3'>POP3</a>
<a href='#/' class='lnk' data-idx='4'>POP4</a>


<div class='pop'>
  <img src='https://i.imgur.com/ydfYXqh.jpg'>
  <header>POP0</header>
</div>


<div class='pop'>
  <img src='https://i.imgur.com/DrEwPH0.jpg'>
  <header>POP1</header>
</div>


<div class='pop'>
  <img src="https://i.imgur.com/AXUJEUS.jpg">
  <header>POP2</header>
</div>


<div class='pop'>
  <img src='https://i.imgur.com/MEPxbq4.jpg'>
  <header>POP3</header>
</div>


<div class='pop'>
  <img src='https://i.imgur.com/dp8G9Fr.jpg'>
  <header>POP4</header>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

​