1

最初のクリックでリストアイテムのテキストとhrefを変更しようとしています。2回目のクリックで、新しい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');
});

2番目の方法では、テキストとhrefを切り替えますが、preventDefault（）を使用すると、セレクターで[href = "＃"]を指定しても、新しい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');
});
4

3 に答える 3

2

代わりに.one（'click'）を使用して、クリックを1回だけバインドします 

$('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 に答える