獲取多個fadeToggle w /相同的類名獨立工作

Question

我試圖通過單擊觸發器/按鈕使fadeToggle效果工作的配置文件。它在頁面上的第一個配置文件上工作，但在其拒絕淡入淡出之後的其他配置文件中工作。由於配置文件在網站軟件上設置的方式，我無法給這些配置文件獨特的類來解決問題。

儘管擁有相同的類名，fadeToggle onclick是否可以獨立處理每個配置文件？

這裏有一個的jsfiddle證明：https://jsfiddle.net/frustratedkij/vntsjhmg/14/

我的javascript：

$("#prof__trigger").click(function() { $("#sunderav").fadeToggle(900, "linear").unbind("click", handler); return false; }); 

HTML：

 <div class="sunderminiprof"><div id="sunderav"><img src="img"></img></div> 
    <div class="sunderminititle"> 
    <div class="sundergif"><img src="img"></div> 
    <h1>Player</h1><hr><h2><title>Bacon ipsum dolor amet strip steak swine brisket biltong hamburger shank bacon pastrami beef ribs.</title></h2></div> 
    <br> 
    <br> 
    <table> 
     <thead> 
     <tr> 
      <th scope="col">Class</th> 
      <th scope="col">House</th> 
      <th scope="col">Nation</th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr> 
      <th scope="row">Class here.</th> 
      <td>House here.</td> 
      <td>Nation here</td> 
     </tr> 
     <tr> 
      <th scope="row">Numbers</th> 
      <td>Numbers</td> 
      <td>Numbers</td> 
     </tr> 
     <tr> 
      <th scope="row">Numbers</th> 
      <td>Numbers</td> 
      <td>Numbers</td> 
     </tr> 
     <tr> 
      <th scope="row">Numbers</th> 
      <td>Number</td> 
      <td>Numbers</td> 
     </tr> 
     </tbody> 
    </table> 

<div id="prof__trigger" title="Click for profile"><i class="fa fa-circle"></i></div> 
</div> 

Answer 1

您現在正在使用的ID（其中應該只有一個文件中），你想要使用類的地方，把#prof__trigger和#sunderav改爲html中的類。

你可以做的是下面的，它需要的，HTML和JavaScript爲這個小改工作。

讓我們開始與HTML

HTML

<div class="sunderminiprof"> 
    <div class="sunderav></div> 
    <div class="sunderminititle"> 
     <div class="sundergif"> 
      <img src="imgname.*" /> 
     </div> 
     <h1>Player</h1> 
     <!-- also add all the other items //--> 
    </div> 
    <table> 
     <!-- add all the table contents //--> 
    </table> 
    <div class="prof__trigger"> 
     <i class="fa fa-circle"></i> 
    </div> 
</div> 

像以前那樣prof__trigger嵌套在您的sunderminiprof。在我之前的例子中，我的嵌套錯誤，所以你應該嘗試做的是以下。我個人開始與附加的事件上，像這樣的sunderminiprof元素：

的javascript（使用jQuery）

var r_miniprofs = $('.sunderminiprof'); 
$(r_miniprofs).each(function(i, oProf){ 
    // find all the triggers and sunderav's in this profile. 
    r_triggers = $(oProf).find('.prof__trigger'); 
    r_sunderav = $(oProf).find('.sunderav'); 

    //loop through the triggers in this profile and attach click event to them. 
    //on click, do something with all of the sunderav items in the same profile. 
    $(r_triggers).each(function(i, oTrigger){ 
     $(oTrigger).on('click',function(){ 
      $(r_sunderav).each(function(i,oSunderav){ 
       $(oSunderav).fadeToggle(900,'linear') 
          .unbind('click',handler); 
      }); 
      // if your intention was to remove the click from the element, after the profile is revealed, remove the .unbind('click',handler); and add this next bit of code instead of this comment: 
      // $(oTrigger).off(); 
      return false; 
     }); 
    }); 
});