Jquery：使用.on（“click”）切换最近的父元素？ [复制]答案

【问题标题】：Jquery: Toggle closest parent element using .on("click")? [duplicate]Jquery：使用.on（“click”）切换最近的父元素？ [复制]
【发布时间】：2014-02-23 03:09:41
【问题描述】：

给定 HTML，例如

<div class="tpl grey">Hosts:
    <p>Hi !</p>
    <p>How are you ?</p>
    <p>What ever.</p>
    <a href="./~">An other child & element type !</a>
</div>

如何使点击子元素切换最近的父元素.tpl 的class="grey" ？

以下代码失败：

//Action to do on parent $(".tpl") 
var switch1 = function () {
    $(this).closest(".tpl").toggleClass("blue grey");
}

// On() click event
$(document).ready(function() {
        $(".tpl").on("click", "p", switch1() );
});

小提琴： http://jsfiddle.net/MRcCy/1

【问题讨论】：

$(".tpl").on("click", "*", switch1() ) 应该更好，因此它适用于所有子元素 (*)
将 $(".tpl").on("click", "p", switch1() ); 更改为 $(".tpl").on("click", "p", switch1 ); jsfiddle.net/j08691/MRcCy/2
如果你有foo(bar())这样的代码，那么bar会被执行首先，它的返回值会被传递给foo。参数总是首先被评估。
@FelixKling：哦，是的，谢谢。

标签： javascript jquery jquery-traversing

【解决方案1】：

如果您只想切换最近的 .tpl（即使我只看到一个）试试这个

$(document).ready(function() { $(".tpl p").click(function(){ $(this).closest('.tpl').toggleClass('grey'); }); });

【讨论】：

【解决方案2】：

Check this fiddle

$(document).ready(function() {
    $(".tpl").click(function(){
        $('.tpl').toggleClass('grey blue');
    });
});

【讨论】：