Jquery:使用.on(“click”)切换最接近的父元素?

时间:2014-02-22 18:56:37

标签: javascript jquery jquery-traversing

给出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>

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


以下代码失败:

//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

2 个答案:

答案 0 :(得分:1)

如果你只想切换最接近的.tpl(即使我只看到一个),试试这个

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

答案 1 :(得分:1)

<强> Check this fiddle

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