获得多个fadeToggle与相同的类名独立工作

Getting multiple fadeToggle w/ same class name to work independently

本文关键字：独立 工作 fadeToggle      更新时间：2023-09-26

我试图通过点击触发器/按钮来制作一个具有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>

你现在正在使用ID(文档中应该只有一个)，在你想使用类的地方，将#prof__trigger和#sunderav更改为html中的类。

你可以做的是以下，它需要在，html和javascript的一个小的变化，这工作。

让我们从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元素开始，如下所示:

(使用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;
        });
    });
});
相关文章：