Question

我正在尝试在第一次点击时更改列表项的文本和href。在第二次单击时，它应该转到新的URL。这些是我尝试过的几种方式：

HTML

<ul class="nav">
  <li><a href="#">Click me</a></li>
</ul>

的jQuery

这样可以更改文本，然后立即转到新网址。

$('ul.nav li:nth-child(1) a[href="#"]').click(function() {
  $(this).text('New Text');
  $(this).attr('href', 'http://www.website.com');
});

第二种方式是切换text和href，但是尽管在选择器中指定了[href =“＃”]，preventDefault（）仍然阻止我转到新的URL。

$('ul.nav li:nth-child(1) a[href="#"]').click(function(e) {
  $(this).text('New Text');
  e.preventDefault();
  $(this).attr('href', 'http://www.website.com');
});

Answer 1

使用.one（'click'）来仅绑定点击一次

$('ul.nav li:nth-child(1) a[href="#"]').one('click', function(e) {
  e.preventDefault();
  $(this).text('New Text').attr('href', 'http://www.website.com');
});

Answer 2

您有多个选项，包括在第一次点击后删除点击处理程序（使用非委托事件处理程序，只会影响刚刚点击的元素）：

$('ul.nav li:nth-child(1) a[href="#"]').click(function(e) {
  $(this).text('New Text')
         .attr('href', 'http://www.website.com')
         .off('click'); // remove click handler
  e.preventDefault();
});

...或设置一个标志，以便您可以判断它是否已被更改：

$('ul.nav li:nth-child(1) a[href="#"]').click(function(e) {
   var $this = $(this);
   if (!$this.data("urlChanged")) {
      $this.text('New Text')
           .attr('href', 'http://www.website.com')
           .data("urlChanged", true);
      e.preventDefault();
   }
});

Answer 3

$('ul.nav li:nth-child(1) a[href="#"]').click(function(e) {
  var elem = $(this);
  if(!elem.hasClass("changed")){
    elem.addClass("changed");
    $(this).text('New Text');
    $(this).attr('href', 'http://www.website.com');
    e.preventDefault();
  }
});

如何在第一次点击时更改href并在第二次点击时转到它？

3 个答案: