使用函數來觸發.toggle（）而不是.click（）

我想創建一個簡單的函數，它可以接受一個參數並將它傳遞給.toggle（）事件。該頁面可能包含數百個單獨的切換事件。我想要一個函數來處理所有這些事件。使用函數來觸發.toggle（）而不是.click（）

function toggleVehicles(partId) { 
$("#"+partId+"vehicles").fadeToggle('fast'); 
}

的功能是從點擊表格行叫做：

<tr id="<? echo $id; ?>Control" onClick="showVehiclesbyPart(<? echo $id; ?>); toggleVehicles(<? echo $id; ?>)" class="list">

功能showVehiclesbyPart是AJAX數據的收集，其次是有問題的功能在這裏。

該功能起作用，除了最初單擊時，切換不能正確執行。它看起來好像正在切換並立即返回。任何後續的點擊都會正確切換div。

我研究了一些其他類似問題的帖子，並提到了綁定。我是新來的jQuery和Javascript，我似乎無法找到我覺得可能是一個簡單的修復。

該頁面位於http://www.partsconsign.com。展開一個類別並點擊零件編號記錄以查看問題。

來源

2012-03-02 Devin

你應該使用'$（'。sel'）。event（handler）'語法，而不是象onclick =「doSomething（）」這樣的內聯事件處理程序。 – 2012-03-02 17:36:47

同意。你應該使用''（'。list'）。on（'click'，function（）{/ *你的AJAX的東西* /; $（this）.fadeToggle（'fast'）;}）;'This將允許擺脫你的HTML在你的onclick，並在一個函數調用，而不是兩個函數調用所有事件 – Birdman 2012-03-02 17:43:31

我怎樣才能傳遞參數我通過內聯事件處理程序toggleVehicles（<？echo $ id;？ >）？ – Devin 2012-03-02 17:52:09

您的問題是，您的表格行顯示您的車輛零件最初顯示。當您單擊第一次，它加載數據，然後切換從：

display: table-row;

到

display: none;

更改這些行display: none;在頁面加載，所以在他們第一次點擊，他們將切換顯示而不是隱藏。

來源

2012-03-02 17:36:15 Birdman

這個技巧。非常感謝你的幫助！ - 德文 – Devin 2012-03-02 17:42:30

請標記爲正確答案，以便人們不嘗試回答已經回答的問題 – Birdman 2012-03-02 17:58:07

這有點晚，但下面是我在說的時候使用jQuery事件處理函數的方法。請注意，我根據自己的方法進行了一些更改，並使用cellpadding和cellspacing作爲顯示錶格的捷徑（在大多數情況下，我不會在實踐中使用這些屬性）。

您會看到我創建了一個基本的error元素（$err），然後在第一次單擊時克隆並添加到單擊的行後面。然後我使用$(this).next('.err')來切換tr.err。

這比使用內聯事件處理程序要容易得多。

HTML

<div class="parts-list"> 
    <h1 class="link" id="filtersControl">FILTERS</h1> 
    <table class="list" width="100%" cellspacing="1" cellpadding="1" border="1">  
     <tr> 
      <th class="first" width="128" scope="col">FA PART#</th> 
      <th width="213" scope="col">MOTORCRAFT# (FORD#)</th> 
      <th width="226" scope="col">DESCRIPTION</th> 
      <th width="87" scope="col">ON-HAND</th> 
      <th width="107" scope="col">USE:</th> 
     </tr> 
     <tr id="110Control" class="list"> 
      <td class="first alt link"></td> 
      <td class=" alt link"><a href="#">(2C2Z1107BA)</a></td> 
      <td class=" alt link"><a href="#">WHEEL STUD </a></td> 
      <td class=" alt link"><a href="#">5</a></td> 
      <td class=" alt link"> 
       <input name="110" type="text" id="110" size="3" maxlength="2" /> 
      </td> 
     </tr> 
     <tr id="109Control" class="list"> 
      <td class="first link"></td> 
      <td class=" link"><a href="#">(2C2Z1012AA)</a></td> 
      <td class=" link"><a href="#">WHEEL NUT </a></td> 
      <td class=" link"><a href="#">5</a></td> 
      <td class=" link"> 
       <input name="109" type="text" id="109" size="3" maxlength="2" /> 
      </td> 
     </tr> 
    </table> 
</div>

CSS

.parts-list { 
    border: 1px solid #86BBD2; 
    background: #CEE7EE; 
} 
.parts-list h1 { 
    margin: 0; 
    padding: 4px; 
    font: sans-serif; 
    font-size: 1em; 
    font-weight: normal; 
    color: #acacac; 
} 
.parts-list table.list { 
    display: none; 
}

的Javascript

$(document).ready(function(){ 
    var $partslist = $('.parts-list'), 
     cols = $partslist.find('table.list tr td').length, 
     $err = $('<tr><td>'); 

    $err.addClass('err') 
     .find('td') 
     .attr('colspan', cols) 
     .text('This part does not fit any vehicles in your fleet.') 
     .click(function(){ 
      $(this).toggle(); 
      return false; 
     }); 

    var toggleOn = function(){ 
     var $this = $(this), 
      $clone; 

     if (!$this.next().is('.err')) { 
      $clone = $err.clone(true); 
      $(this).after($clone); 
     } else { 
      $this.next('.err').show(); 
     } 
    }; 

    var toggleOff = function(){ 
     var $next = $(this).next(); 

     $(this).next('.err').hide(); 
    }; 

    $partslist.find('h1').click(function(){ 
     $(this).siblings('table.list').toggle(); 
    }); 

    $partslist.find('table.list tr').not(':has(th)').toggle(toggleOn, toggleOff); 
});

http://jsfiddle.net/kREhM/

來源

2012-03-02 18:24:52

使用函數來觸發.toggle（）而不是.click（）

回答

相關問題