javascript - 需要滑出按钮才能单独工作。当单击一个按钮时，两者都会执行任务。

Question

您好，我有两个按钮，当单击其中一个按钮时，它会滑出以显示更多信息。当单击一个按钮时，两个按钮都会滑出。我将第二个按钮类更改为button2和inner2，并将javascript加倍并将其中的类更改为button2和inner2，但这确实让事情变得很奇怪。

<a class="text button1 btn btn-primary btn-lg">Learn more<a class="link inner is-hidden btn btn-primary btn-lg" href="#">Movie Data</a><a class="link inner is-hidden btn btn-primary btn-lg" href="#">Full Trailer</a><a class="link inner is-hidden btn btn-primary btn-lg" href="#"More Reviews</a><a class="link inner is-hidden btn btn-primary btn-lg" href="#">Photos</a></a>

<小时/>

$('.button1').on('click', function() {
animateDiv();
})

$(document).keyup(function(e) {
if (e.keyCode === 27 && $('.inner').hasClass('visible')) {
animateDiv();
}
})

function animateDiv() {
$('.inner').toggleClass('visible');
$('.inner').animate({
width: 'toggle',
}, 0);
}

Answer 1

在animateDiv中，您指的是.inner，它将匹配两个按钮，或者至少将匹配该类的每个元素。除非您以某种方式指定它引用的是哪个外部按钮，否则它将不起作用。

尝试将按钮传递到您的函数中，然后确定其范围:

$('.button1').on('click', function() {
  animateDiv($(this));
})

function animateDiv(button) {
  $('.inner', button).toggleClass('visible');
  $('.inner', button).animate({
    width: 'toggle',
  }, 0);
}

但是，您的其他代码仍然存在问题，因为它无法知道您在整个文档的按键上引用了哪个按钮。不让它同时执行这两项操作的唯一方法是将 keyup 的范围也限制在按钮上:

$('.button1').keyup(function(e) {
  if (e.keyCode === 27 && $('.inner', $(this)).hasClass('visible')) {
    animateDiv($(this));
  }
})

编辑:

实际上，我认为您的 HTML 格式不同。看起来很奇怪。还有按钮2吗？为什么.button1里面有这么多.inner？

我一开始以为您在 .button123 div 内有几例 .inner div。很难判断何时全部都在一条线上。但现在想知道您的 HTML 是否被破坏或者您的问题中缺少某些内容？