Question

每个列表项都附加此for循环。例如，想象一下包含三个元素的列表。连续的两个按钮构成每个列表元素。目标是默认隐藏所有.second按钮。单击特定的.first按钮时，将隐藏该特定的.first按钮，并显示该特定的.second按钮。具体而言，我的意思是属于同一个列表元素。

for (i=0; i<userLog.length; i++) {
      $('#modalChoices').append("<li id='modalItem'><input class='modalInput btn btn-primary first' type='button'> <input class='modalInput btn btn-success second' type='button'></li>");
    }

  // Hide all seconds by default.
  $('.second').hide();

  $('.first').on('click', function() {
    $('.first').hide();
    $('.second').show();
  });

我们可以非常轻松地隐藏所有的秒数和所有的第一。我们如何区分列表项？是否有一些＆＃39;这个＆＃39;选择器将完成此任务？

Answer 1

使用$(this)选择器隐藏第一个按钮，并使用$(this).siblings('.second')选择器显示该特定li的第二个按钮。

$('.first').on('click', function() {
    $(this).hide();
    $(this).siblings('.second').show();
});

请查看下面的代码段，以便更好地进行处理。

for (i=0; i<20; i++) {
  $('#modalChoices').append("<li id='modalItem'><input class='modalInput btn btn-primary first' value='first' type='button'> <input class='modalInput btn btn-success second' type='button' value='second'></li>");
}

// Hide all seconds by default.
$('.second').hide();

$('.first').on('click', function() {
    $(this).hide();
    $(this).siblings('.second').show();
});

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

Answer 2

单线来解决这个问题。 $(this)指的是被点击的input.first，next()是其相邻的input.second。使用next比使用siblings更快。

$('.first').click(function() {
    $(this).hide().next('.second').show();
});

  for (i=0; i<5; i++) {
      $('#modalChoices').append("<li id='modalItem'><input class='modalInput btn btn-primary first' value='first' type='button'> <input class='modalInput btn btn-success second' type='button' value='second'></li>");
    }

  // Hide all seconds by default.
  $('.second').hide();

  $('.first').click(function() {
    $(this).hide().next('.second').show();
  });

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

Answer 3

jQuery事件回调始终具有目标元素的上下文。因此，您可以使用this获取指向它们的指针。然后使用.siblings函数获取任何相邻项，在本例中为.second。

注意：不要反复解析选择器，并在选择器中使用上下文总是一个好主意，就像我在这里使用modalChoices var。

    var modalChoices = $('#modalChoices');

    for (i = 0; i < userLog.length; i++) {
          modalChoices.append("<li id='modalItem'><input class='modalInput btn btn-primary first' type='button'> <input class='modalInput btn btn-success second' type='button'></li>");
    }

    // Hide all seconds by default. 
    $('.second', modalChoices).hide();

    $('.first', modalChoices).on('click', function() {
        $(this).hide().siblings(".second").show();
    });

Javascript - 区分类似的列表项

3 个答案: