Question

我正在尝试在单击项目后的下一个p元素中添加一个类。在我的函数中，删除该类的部分正在工作，但是p元素的选择器不正确，因此没有发生任何事情。

function classChange() {
    if($(this).hasClass('active')) {
        //do nothing
    }
    else {
        $('.active').removeClass('active');
        $(this).next('p').addClass('active');
    }
}

$('h1').click(function() {
    classChange();
});

Answer 1

在classChange()函数中，this引用Window对象（假设函数在全局范围内）。

如果您希望它引用点击的H1元素，请定义点击事件，如下所示：

$('h1').click(classChange);

如果您想切换下一个P元素的显示，请像这样定义classChange()：

function classChange() {
  $(this).next('p').toggleClass('active');
}

Fiddle 1

相反，如果您想要始终显示其中一个P元素，请按以下方式定义：

function classChange() {
  $('.active').removeClass('active');
  $(this).next('p').addClass('active');
}

Fiddle 2

Answer 2

classChange中的this不是您认为的那样。您可以尝试执行以下操作，将e.target this绑定到classChange()函数中：

function classChange() {
    if($(this).hasClass('active')) {
        //do nothing
    }
    else {
        $('.active').removeClass('active');
        $(this).next('p').addClass('active');
    }
}

$('h1').click(function(e) {
    classChange.bind(e.target)();
});

或者您可以像e.target一样传递classChange(e.target)，并按照以下方式使用它：

function classChange(target){
    if($(target).hasClass('active')){
    } else { 
          $('.active').removeClass('active');
         $(target).next('p').addClass('active');
    }
}

Answer 3

你这里做错了..

一个值得注意的是

if($(this).hasClass('active')) {

$（this）返回窗口，而不是将事件绑定到h1的所选元素。

由于您正在调用函数来执行此操作，因此可以通过$（this）向该函数添加参数。

这是演示..

function classChange(e) {
		//$(this)
    //would return window and not the h1
    if($(e).next('p').hasClass('active')) {
        //do nothing
    }
    else {
        $('.active').removeClass('active');
        $(e).next('p').addClass('active');
    }
}

$('h1').click(function() {
	classChange($(this));
});

p {
  opacity: 0;
}

.active {
  opacity: 1 !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>
Hello
</h1>
<p class="active">
  hello
</p>
<h1>
Goodbye
</h1>
<p>
  Goodbye
</p>

选择某个元素的直接下一个

3 个答案: