1

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

HTML

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

jQuery

这种方式会更改文本，然后立即转到新的 url。

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

第二种方法切换 text 和 href 但 preventDefault() 仍然阻止我转到新 URL，尽管在选择器中指定了 a[href="#"]。

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

3 回答 3

2

改用 .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');
});
于 2012-11-15T04:09:09.597 回答
0 
$('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();
  }
});
于 2012-11-15T04:14:41.667 回答
0

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

$('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();
   }
});
于 2012-11-15T04:09:34.737 回答