Question

我将使用事件的选择器来放入函数，但这不起作用。

我已经尝试了一些技巧，将在下面的代码中显示。

// the actual code
$('#voyages').on('click', function() {
  if (continentOuvert == false) {
    $('#voyages i.fas.fa-arrow-up').show(500);
    $('#voyages i.fas.fa-arrow-down').hide();
  }
});

// the functions I try to make
function arrowUp() {
  $('this i.fas.fa-arrow-up').show(500);
  $('this i.fas.fa-arrow-down').hide();
}

// or
function arrowUp() {
  $(this + ' i.fas.fa-arrow-up').show(500);
  $(this + ' i.fas.fa-arrow-down').hide();
}

什么也没发生，我想我做错了。

感谢您的帮助。

Answer 1

您可以使用find方法：

$(this).find('i.fas.fa-arrow-up').show(500);
$(this).find('i.fas.fa-arrow-down').hide();

Answer 2

如上所述，$(this)不能是选择器，因为它是对象而不是字符串。或者，您可以使用$(e.target)指向被单击的元素（即.voyages），并始终传递事件对象（在演示中为e变量）。 .toggleClass()将简化您的代码。 jQuery也是灵活的，因此不要使用#id尽可能使用.class。

$('.voyages').on('click', function(e) {
  var icon = $(e.target).find('.fas');
  icon.toggleClass('fa-flip-vertical');
});

button {
  cursor: pointer;
  font-size: 24px
}

<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet" crossorigin="anonymous">

<button class='voyages'>Voyages <i class='fas fa-arrow-up'></i></button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 3

感谢您的所有答复。我终于使用了这段代码：

function arrowUp(id) {
            $(id + ' i.fas.fa-arrow-up').show(500);
            $(id + ' i.fas.fa-arrow-down').hide();
        }

arrowUp('#'+$(this).attr('id'));

使用“ this”关键字作为选择器

3 个答案: