Question

我尝试使用fadeToggle效果创建一个配置文件，通过单击触发器/按钮。它适用于页面上的第一个配置文件，但其后的每个其他配置文件都拒绝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（文档中应该只有一个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;
        });
    });
});

获得具有相同类名的多个fadeToggle以独立工作

1 个答案: