javascript - 使多个 fadeToggle 具有相同的类名以独立工作

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;
        });
    });
});