jQuery的基本撥動唯一的工作的一種方式

我已經創造了一些快速切換的jQuery代碼：jQuery的基本撥動唯一的工作的一種方式

$("#expander.closed").click(function(){ 
    console.log("opening"); 
    $("#expander").removeClass(); 
    $("#expander").addClass("open"); 
}); 
$("#expander.open").click(function(){ 
    console.log("closing"); 
    $("#expander").removeClass(); 
    $("#expander").addClass("closed"); 
});

的想法是，每次你點擊open和closed之間#expander類切換。

但是，由於某些原因，它只能工作一次，從closed更改爲open，然後不再進一步。

我不知道爲什麼。 Here's a jsFiddle。

來源

2013-02-15 ACarter

我想在開始的時候，當你綁定的事件，.closed類不存在，所以事件沒有得到約束

可能是你應該事件綁定到一些其他標準，或使用live。它被廢棄了，雖然

更好的方式是這樣的

$("#expander_parent").on('click', '#expander.closed', function(){ 
    // Do your stuff 
})

來源

2013-02-15 19:26:02

謝謝您的回答。爲什麼會使用父母更好的方式呢？ – ACarter 2013-02-15 19:33:07

JQuery'on'使用父代理事件觸發器。但是，我仍然會使用有線的解決方案，該解決方案針對您的情況進行了簡化。但是，如果您在綁定事件時尚未擁有元素，但仍希望能夠使用該元素，請使用'on' – 2013-02-15 19:37:57

請參閱以供參考http://stackoverflow.com/questions/9122078/difference- on-onclick-vs-click – 2013-02-15 19:40:23

只使用ID綁定，並使用.toggleClass

$("#expander").click(function(){ 
    $(this).toggleClass('open closed'); 
});

FIDDLE

切換類，如果你需要做的其他功能取決於它可以檢查的類型

$("#expander").click(function(){ 
    var $this = $(this); 
    $this.toggleClass('open closed'); 
    if($this.hasClass('open')){ 
     // do your open code 
    }else{ 
     // do your close code 
    } 
});

FIDDLE

來源

2013-02-15 19:27:11

感謝您的回答。但是，在更廣泛的方案中，我需要執行與功能已被切換到哪種方式相關的其他功能。（基本上，只需點擊一下動畫，然後在另一邊，動畫就會反轉。）有什麼方法可以使用這種解決方案我可以做這樣的事情嗎？乾杯。 – ACarter 2013-02-15 19:32:16

@Aarter我更新了我的答案，以顯示你:) – 2013-02-15 19:35:54

當然！我應該記得hasClass ...謝謝:) – ACarter 2013-02-15 19:37:48

你可以做到這一點和的if/else條件的範圍內添加其他相關業務

HTML：

<div id="expander" class="closed">Click Me</div>

CSS：

.closed { 
    background-color: red; 
} 

.open { 
    background-color: blue; 
}

的Javascript：

$("#expander.closed").click(function(){ 
    if ($('#expander').attr('class') === 'closed') { 
      $('#expander').attr('class', 'open'); 

      // Add other related functions here 
    } else { 
     $('#expander').attr('class', 'closed'); 

     // Add other related functions here 
    }  
});

http://jsfiddle.net/mCDwy/1/

來源

2013-02-15 19:39:49 Tuan

jQuery的基本撥動唯一的工作的一種方式

回答

相關問題