jQuery的标签不工作标签、工作、jQuery

2023-09-11 01:21:20 作者：刚好遇见你

我有一个问题，点击功能。我已经创造了这个演示从jsfiddle.net。

在本演示中，你可以看到有笑脸按钮。当你点击这些按钮，然后一个标签将开幕的时间。如果您单击然后选项卡不能正常工作，从制表领域的红色按钮有出事了。

任何人都可以帮助我在这里有什么问题，该如何解决？

该选项卡返回这样的工作演示

  VAR响应='＆LT; DIV CLASS =icon_b＆GT;
            ＆LT; DIV CLASS =clickficon＆GT;＆LT; / DIV＆GT;
                ＆LT; DIV CLASS =EMICON菜单MaterialTabs＆GT;
                    ＆LT; UL＆GT;
                        ＆LT;李类=标签激活＆GT;＆LT; A HREF =＃斯塔克斯 -  PANEL1＆GT; TAB1＆LT; / A＆GT;＆LT; /李＆GT;
                        ＆LT;李类=标签＆GT; ＆所述; A HREF =＃兰尼斯特-PANEL1＆GT; TAB2＆LT; / A＆GT;＆LT; /李＆GT;
                        ＆LT;李类=标签＆GT; ＆所述; A HREF =＃targaryens-PANEL1＆GT; TAB3＆所述; / a取代;＆其中;跨度＆GT;＆所述; /跨度＆GT;＆所述; /利＆GT;
                    ＆LT; / UL＆GT;
                    ＆LT; DIV CLASS =面板＆GT;
                        ＆LT; DIV ID =斯塔克斯 -  PANEL1级=面板pactive＆GT; A＆LT; / DIV＆GT;
                        ＆LT; DIV ID =兰尼斯特，PANEL1级=面板＆GT; B＆LT; / DIV＆GT;
                        ＆LT; DIV ID =targaryens-PANEL1级=面板＆GT; C＆LT; / DIV＆GT;
                    ＆LT; / DIV＆GT;
                ＆LT; / DIV＆GT;
            ＆LT; / DIV＆GT;';

$（文件）。就绪（函数（）{

    功能showProfileTooltip（即ID）{
        //发送ID和放大器;得到get_profile.php信息
        $阿贾克斯（{
            网址：/回声/ HTML /'，
            数据： {
                HTML：响应，
                延迟：0
            }，
            方法：'后'，
            成功：函数（returnHtml）{
                e.find（'。用户容器）。HTML（returnHtml）.promise（）。完成（功能（）{
                    $（'。图释'）addClass（'eactive'）。
                }）;
            }
        }）;

    }
    $（'身体'）。在（'点击'，'.emoticon'，功能（五）{
    VAR ID = $（本）.find（'emoticon_click。'）ATTR（数据ID）。
    showProfileTooltip（$（本），身份证）;
}）;
    $（本）。在（点击，函数（）{
  $（本）.find（'用户容器。'）的HTML（）。
}）;
VAR的ComponentHandler =功能（）{
  使用严格的;

  变种registeredComponents_ = [];
  变种createdComponents_ = [];

  功能findRegisteredClass_（姓名，opt_replace）{
    对于（VAR I = 0; I＆LT; registeredComponents_.length;我++）{
      如果（registeredComponents_ [I] .className ===名）{
        如果（opt_replace！== undefined）的{
          registeredComponents_ [我] = opt_replace;
        }
        返回registeredComponents_ [I]
      }
    }
    返回false;
  }

  功能upgradeDomInternal（jsClass，的CssClass）{
    如果（的CssClass ===未定义）{
      VAR registeredClass = findRegisteredClass_（jsClass）;
      如果（registeredClass）{
        的CssClass = registeredClass.cssClass;
      }
    }

    VAR元素= document.querySelectorAll（+的CssClass'。'）;
    为（变种N = 0; N＆LT; elements.length; N ++）{
      upgradeElementInternal（元素[N]，jsClass）;
    }
  }

  功能upgradeElementInternal（元素，jsClass）{
    如果（element.getAttribute（数据升级'）=== NULL）{
      element.setAttribute（'数据升级的'，''）;
      VAR registeredClass = findRegisteredClass_（jsClass）;
      如果（registeredClass）{
        createdComponents_.push（新registeredClass.classConstructor（元））;
      } 其他 {
        createdComponents_.push（新窗口[jsClass]（元素））;
      }
    }
  }

  功能registerInternal（配置）{
    VAR NEWCONFIG = {
      classConstructor：config.constructor，
      类名：config.classAsString，
      的CssClass：config.cssClass
    };

    VAR发现= findRegisteredClass_（config.classAsString，NEWCONFIG）;

    如果（！找到）{
      registeredComponents_.push（NEWCONFIG）;
    }

    upgradeDomInternal（config.classAsString）;
  }

  返回 {
    upgradeDom：upgradeDomInternal，
    upgradeElement：upgradeElementInternal，
    注册：registerInternal
  };
}（）;




功能MaterialTabs（元）{
  使用严格的;
  this.element_ =元;
  this.init（）;
}

MaterialTabs.prototype.Constant_ = {
  MEANING_OF_LIFE：'42'，
  SPECIAL_WORD：HTML5，
  ACTIVE_CLASS：pactive
};
MaterialTabs.prototype.CssClasses_ = {
  SHOW：materialShow，
  隐藏：materialHidden
};

MaterialTabs.prototype.initTabs_ =功能（E）{
  使用严格的;
  this.tabs_ = this.element_.querySelectorAll（'标签。）;
  this.panels_ = this.element_.querySelectorAll（'板'）;
  对于（VAR I = 0; I＆LT; this.tabs_.length;我++）{
    新MaterialTab（this.tabs_ [我]，这一点）;
  }
};

MaterialTabs.prototype.resetTabState_ =功能（）{
  为（变种K = 0; K＆LT; this.tabs_.length; k ++）{
    this.tabs_ [k]的.classList.remove（'pactive'）;
  }
};

MaterialTabs.prototype.resetPanelState_ =功能（）{
  对于（VAR J = 0; J＆LT; this.panels_.length; J ++）{
    this.panels_ [J] .classList.remove（'pactive'）;
  }
};

功能MaterialTab（标签，CTX）{
  如果（标签）{
    变种链路= tab.querySelector（'一个'）;

    link.addEventListener（'点击'，功能（五）{
      即preventDefault（）;
      变种的href = link.href.split（'＃'）[1];
      VAR面板= document.querySelector（'＃'+ HREF）;
      ctx.resetTabState_（）;
      ctx.resetPanelState_（）;
      tab.classList.add（'pactive'）;
      panel.classList.add（'pactive'）;
    }）;

  }
};


MaterialTabs.prototype.init =功能（）{
  如果（this.element_）{
    this.initTabs_（）;
  }
}


window.addEventListener（'负荷'，函数（）{
  componentHandler.register（{
    构造函数：MaterialTabs，
    classAsString：MaterialTabs，
    的CssClass：MaterialTabs
  }）;
}）;
}）;

解决方案

有更新工作版本。

我们要做的，是移动目标在同一水平上的图标的（就像选项卡和内容）的。取而代之的是：

 ＆LT; DIV CLASS =表情符号＆GT;
    ＆所述;股利类=emoticon_click数据ID =1＆GT;
        ＆LT; IMG SRC =http://megaicons.net/static/img/icons_sizes/8/178/512/emoticons-wink-icon.pngWIDTH =30像素高度=30像素＆GT;
            ＆LT; DIV CLASS =用户容器数据升级＆GT;＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;

＆LT; / DIV＆GT;

我们需要这个

 ＆LT; DIV CLASS =表情符号＆GT;
    ＆所述;股利类=emoticon_click数据ID =1＆GT;
        ＆LT; IMG SRC =http://megaicons.net/static/img/icons_sizes/8/178/512/emoticons-wink-icon.pngWIDTH =30像素高度=30像素＆GT;
            //不是一个孩子
            ＆LT;！ - ＆LT; DIV CLASS =用户容器数据升级＆GT;＆LT; / DIV＆GT;  - ＆GT;
    ＆LT; / DIV＆GT;
    //但兄弟
    ＆LT; DIV CLASS =用户容器数据升级＆GT;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;

如果这是新的HTML的配置，我们可以改变处理程序

目标点击分区 emoticon_click 更改兄弟（没有孩子）div的内容用户容器

旧code 的替换的

  $（'身体'）。在（'点击'，'.emoticon'，功能（五）{
  VAR ID = $（本）.find（'emoticon_click。'）ATTR（数据ID）。
  showProfileTooltip（$（本），身份证）;
}）;
$（本）。在（点击，函数（）{
  $（本）.find（'用户容器。'）的HTML（）。
}）;

现在将替换为：

  // $（'身体'）。在（'点击'，'.emoticon'，功能（五）{
$（'身体'）。在（'点击'，'.emoticon_click'，功能（五）{
    //清楚这个点击事件的开头的所有用户的容器
    $（身体）找到（用户容器。）HTML（）。;

    //查找ID
    VAR ID = $（本）.attr（数据ID）;

    //寻父，其中还包含兄弟
    //用户容器
    VAR父母= $（本）.parent（）

    //让目标启动
    showProfileTooltip（$（父），身份证）;
}）;

$（本）。在（点击，函数（）{
    // $（本）.find（'用户的容器。）HTML（）。
}）;

检查它在这里行动

注：真正有趣的注意是由pinturic 这答案

I have one problem with click function. I have created this demo from jsfiddle.net.

In this demo you can see there are smile buttons. When you click those buttons then a tab will be opening on that time. If you click the red button from tab area then the tab is not working there are something went wrong.

Anyone can help me here what is the problem and what is the solution?

The tab is normalize like this working demo

var response = '<div class="icon_b">
            <div class="clickficon"></div>
                <div class="emicon-menu MaterialTabs">
                    <ul>
                        <li class="tab active"><a href="#starks-panel1"> TAB1</a></li>
                        <li class="tab"> <a href="#lannisters-panel1"> TAB2</a></li>
                        <li class="tab"> <a href="#targaryens-panel1"> TAB3</a><span></span></li>
                    </ul>
                    <div class="panels">
                        <div id="starks-panel1" class="panel pactive"> a </div> 
                        <div id="lannisters-panel1" class="panel"> b </div>
                        <div id="targaryens-panel1" class="panel"> c </div>
                    </div>
                </div>
            </div>';

$(document).ready(function () {

    function showProfileTooltip(e, id) {
        //send id & get info from get_profile.php 
        $.ajax({
            url: '/echo/html/',
            data: {
                html: response,
                delay: 0
            },
            method: 'post',
            success: function (returnHtml) { 
                e.find('.user-container').html(returnHtml).promise().done(function () {
                    $('.emoticon').addClass('eactive');
                });
            }
        });

    }
    $('body').on('click', '.emoticon', function(e) {
    var id = $(this).find('.emoticon_click').attr('data-id');
    showProfileTooltip($(this), id);
});
    $(this).on( "click", function() {
  $(this).find('.user-container').html("");
});
var componentHandler = function() {
  'use strict';

  var registeredComponents_ = [];
  var createdComponents_ = [];

  function findRegisteredClass_(name, opt_replace) {
    for (var i = 0; i < registeredComponents_.length; i++) {
      if (registeredComponents_[i].className === name) {
        if (opt_replace !== undefined) {
          registeredComponents_[i] = opt_replace;
        }
        return registeredComponents_[i];
      }
    }
    return false;
  }

  function upgradeDomInternal(jsClass, cssClass) {
    if (cssClass === undefined) {
      var registeredClass = findRegisteredClass_(jsClass);
      if (registeredClass) {
        cssClass = registeredClass.cssClass;
      }
    }

    var elements = document.querySelectorAll('.' + cssClass);
    for (var n = 0; n < elements.length; n++) {
      upgradeElementInternal(elements[n], jsClass);
    }
  }

  function upgradeElementInternal(element, jsClass) {
    if (element.getAttribute('data-upgraded') === null) {
      element.setAttribute('data-upgraded', '');
      var registeredClass = findRegisteredClass_(jsClass);
      if (registeredClass) {
        createdComponents_.push(new registeredClass.classConstructor(element));
      } else {
        createdComponents_.push(new window[jsClass](element));
      }
    }
  }

  function registerInternal(config) {
    var newConfig = {
      'classConstructor': config.constructor,
      'className': config.classAsString,
      'cssClass': config.cssClass
    };

    var found = findRegisteredClass_(config.classAsString, newConfig);

    if (!found) {
      registeredComponents_.push(newConfig);
    }

    upgradeDomInternal(config.classAsString);
  }

  return {
    upgradeDom: upgradeDomInternal,
    upgradeElement: upgradeElementInternal,
    register: registerInternal
  };
}();




function MaterialTabs(element) {
  'use strict';
  this.element_ = element;
  this.init();
}

MaterialTabs.prototype.Constant_ = {
  MEANING_OF_LIFE: '42',
  SPECIAL_WORD: 'HTML5',
  ACTIVE_CLASS: 'pactive'
};
MaterialTabs.prototype.CssClasses_ = {
  SHOW: 'materialShow',
  HIDE: 'materialHidden'
};

MaterialTabs.prototype.initTabs_ = function(e) {
  'use strict';
  this.tabs_   = this.element_.querySelectorAll('.tab');
  this.panels_ = this.element_.querySelectorAll('.panel');
  for (var i=0; i < this.tabs_.length; i++) {
    new MaterialTab(this.tabs_[i], this); 
  }
};

MaterialTabs.prototype.resetTabState_ = function() {
  for (var k=0; k < this.tabs_.length; k++) {
    this.tabs_[k].classList.remove('pactive');
  }  
};

MaterialTabs.prototype.resetPanelState_ = function() {
  for (var j=0; j < this.panels_.length; j++) {
    this.panels_[j].classList.remove('pactive');
  } 
};

function MaterialTab (tab, ctx) {  
  if (tab) {
    var link = tab.querySelector('a');

    link.addEventListener('click', function(e){
      e.preventDefault();
      var href = link.href.split('#')[1];
      var panel = document.querySelector('#' + href);
      ctx.resetTabState_();
      ctx.resetPanelState_();
      tab.classList.add('pactive');
      panel.classList.add('pactive');
    });   

  }
};


MaterialTabs.prototype.init = function() {
  if (this.element_) {
    this.initTabs_();
  }
}


window.addEventListener('load', function() {
  componentHandler.register({
    constructor: MaterialTabs,
    classAsString: 'MaterialTabs',
    cssClass: 'MaterialTabs'
  });
});
});

解决方案

There is updated and working version.

What we have to do, is to move the target on the same level as the icon is (almost like tab and content). Instead of this:

<div class="emoticon">
    <div class="emoticon_click" data-id="1">
        <img src="http://megaicons.net/static/img/icons_sizes/8/178/512/emoticons-wink-icon.png" width="30px" height="30px">
            <div class="user-container" data-upgraded></div>
    </div>

</div>

We need this

<div class="emoticon">
    <div class="emoticon_click" data-id="1">
        <img src="http://megaicons.net/static/img/icons_sizes/8/178/512/emoticons-wink-icon.png" width="30px" height="30px">
            // not a child
            <!--<div class="user-container" data-upgraded></div>-->
    </div>
    // but sibling
    <div class="user-container" data-upgraded></div>    
</div>

And if this is new HTML configuration, we can change the handlers

to target click on div "emoticon_click" change the content of the sibling (not child) div "user-container"

The old code to be replaced

$('body').on('click', '.emoticon', function(e) {
  var id = $(this).find('.emoticon_click').attr('data-id');
  showProfileTooltip($(this), id);
});
$(this).on( "click", function() {
  $(this).find('.user-container').html("");
});

will now be replaced with this:

//$('body').on('click', '.emoticon', function(e) {
$('body').on('click', '.emoticon_click', function(e) {
    // clear all user container at the begining of this click event
    $('body').find('.user-container').html("");

    // find id
    var id = $(this).attr('data-id');

    // find the parent, which also contains sibling
    // user-container
    var parent = $(this).parent()

    // let the target be initiated
    showProfileTooltip($(parent), id);
});

$(this).on( "click", function() {
    //$(this).find('.user-container').html("");
});

Check it in action here

NOTE: the really interesting note was in this Answer by pinturic

上一篇：AJAX上传出的多文件上传只有文件的进展情况进展情况、文件上传、文件、AJAX

下一篇：获得从本地文件夹中的所有图像图像、本地文件、夹中

相关推荐