jQuery锚定点击，“this”，“e.target” - 返回url [英] jQuery anchor click, "this", "e.target" - returns url

问题描述

我已经从Mootools切换到jQuery，因为我认为它有更好的支持。我有这样的HTML：

 < ul class =menuHandler> 
< li class =menuTreeElement activeOptid =menuOpt1> 
< ul id =menuOpt1Content> 
< li>< a href =＃class =menuOpener> Opcje< / a>< a href =＃class =sprite menuOpener>< / a> ; / li> 
< li class =submenuElement> Opcje< / li> 
< li class =submenuElement> Opcje< / li> 
< li class =submenuElement> Opcje< / li> 
< li class =submenuElement> Opcje< / li> 
< li class =submenuElement> Opcje< / li> 
< li class =submenuElement> Opcje< / li> 
< / ul> 
< / li> 
< / ul> 
  

JS

  jQuery（document）.ready（function（$）
 {
 $（'。menuTreeElement .submenuElement'）hide（）; 
 $（'。menuHandler li.menuElement ，.menuHandler li.menuTreeElement'）。removeClass（'inactiveOpt'）; 
 $（' '.menuHandler li.menuElement a.menuOpener，.menuHandler li.menuTreeElement a.menuOpener'）。点击（function（e）{
 e.preventDefault（）; 
 alert（this）; 
 alert（this.id）; 
 alert（$（this））; 
 alert（e.target）; 
 alert（e.target.id）; 
 alert $（e.target））; 
}）; 
}）; 
  

结果：

，[object Object]，URL，Empty alert，[object Object]。我不知道该怎么办。如果可以帮助您，请链接： http://misiur.com/CRP/admin/

我想实现：
1.你点击一个类menuOpener
2.所有li和类submenuElement在同一ul（在这种情况下menuOpt1Content）正在显示

解决方案

  $（'ul.menuHandler'）delegate a.menuOpener'，'click'，function（ev）{
 
 //阻止跟随链接
 ev.preventDefault（）; 
 
 //创建一个jquery对象与锚点元素
 var $ anchor = $（this）; 
 
 //通过类menuTreeElement获得父li 
 var $ li = $ anchor.closest '）; 
 
 //获取其兄弟姐妹并显示??? 
 $ li.nextAll（）。show（）
 
 
}）; 
  

I've switched from Mootools to jQuery, because I think it has better support. I've got HTML like that:

<ul class="menuHandler">
<li class="menuTreeElement activeOpt" id="menuOpt1">
<ul id="menuOpt1Content">
<li><a href="#" class="menuOpener">Opcje</a><a href="#" class="sprite menuOpener"></a></li>
<li class="submenuElement">Opcje</li>
<li class="submenuElement">Opcje</li>
<li class="submenuElement">Opcje</li>
<li class="submenuElement">Opcje</li>
<li class="submenuElement">Opcje</li>
<li class="submenuElement">Opcje</li>
</ul>
</li>
</ul>

JS

jQuery(document).ready(function($)
{
    $('.menuTreeElement .submenuElement').hide();   
    $('.menuHandler li.menuElement, .menuHandler li.menuTreeElement').removeClass('activeOpt');
    $('.menuHandler li.menuElement, .menuHandler li.menuTreeElement').addClass('inactiveOpt');
    $('.menuHandler li.menuElement a.menuOpener, .menuHandler li.menuTreeElement a.menuOpener').click(function(e){
    e.preventDefault();
    alert(this);
    alert(this.id);
    alert($(this));
    alert(e.target);
    alert(e.target.id);
    alert($(e.target));     
    });
});

Results:

URL, Empty alert, [object Object], URL, Empty alert, [object Object]. I don't know what to do. Link if it'll help: http://misiur.com/CRP/admin/

I want to achieve that: 1. You click on a with class menuOpener 2. all li with class submenuElement inside same ul (in this case menuOpt1Content) are showing

解决方案

$('ul.menuHandler').delegate('a.menuOpener', 'click', function(ev){

     //prevent follow of link
     ev.preventDefault();

     //create a jquery object with the anchor element
     var $anchor = $(this);

     //get parent li with class menuTreeElement
     var $li = $anchor.closest('li');

     //get its siblings and show???
     $li.nextAll().show()


});

这篇关于jQuery锚定点击，“this”，“e.target” - 返回url的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！