Question

我有以下html：

<li class="active active-tab">
    <span class="text">Tab 1</span>
</li>
<li class="next next-tab">
    <span class="text">Tab 2</span>
</li>

以下jquery：

$('.next-tab').click(function() {
    $('.active-tab').addClass( 'prev prev-tab' );
    $('.active-tab').removeClass('active active-tab');
    $('.next-tab').addClass('active active-tab');
    $('.next-tab').removeClass('next next-tab');
});

$('.prev-tab').click(function() {
    $('.active-tab').addClass( 'next next-tab' );
    $('.active-tab').removeClass('next active-tab');
    $('.prev-tab').addClass( 'active active-tab' );
    $('.prev-tab').removeClass('prev prev-tab');
});

当我点击.next-tab li元素时，它确实会将第一个li元素更改为具有类prev prev-tab。

但是，当我点击第一个li元素时，它现在有prev prev-tab作为类，它不会执行jQuery，即使它在脚本中已经说明了。

为什么在按下具有$('.prev-tab').click(function()的li元素时prev prev-tab没有执行？

为了便于错误诊断，我创建了这个jsFiddle（需要webconsole :)）

Answer 1

这种情况正在发生，因为在from pyspark.sql.functions import * from pyspark.sql.types import * from statistics import pvariance def calculateVar(row): data = [float(x.strip()) for x in row.split(",")] return pvariance(data) varUDF = udf(calculateVar,FloatType()) df.withColumn('Variance',varUDF(concat_ws(",",df.a,df.b,df.c))).show()加载时，+---+---+---+---+---------+ | id| a| b| c| Variance| +---+---+---+---+---------+ | 1| 12| 15| 7|10.888889| | 2| 6| 15| 2|29.555555| | 3| 56| 25| 25|213.55556| | 4| 36| 12| 5|176.22223| +---+---+---+---+---------+类没有可用的元素。要解决这个问题，您需要将这些元素放在包装器中并在包装器上使用on()事件，如下所示 -

document

请注意，我在这里使用了prev-tab，但您可以使用任何其他元素，前提是它是您需要触发此事件的DOM元素的父元素。

在此处更新了JS小提琴 - https://jsfiddle.net/afqsz861/3/

Answer 2

我不知道你想在这里实现什么。但是为了回答你的问题，我认为在DOM树中将事件绑定得更高（如文档）应该可以解决问题，所以：

$(document).on('click', '.next-tab', function(){
    $('.active-tab').addClass( 'prev prev-tab' );
    $('.active-tab').removeClass('active active-tab');
    $('.next-tab').addClass('active active-tab');
    $('.next-tab').removeClass('next next-tab');
});
$(document).on('click', '.prev-tab', function(){
    $('.active-tab').addClass( 'next next-tab' );
    $('.active-tab').removeClass('next active-tab');
    $('.prev-tab').addClass( 'active active-tab' );
    $('.prev-tab').removeClass('prev prev-tab');
});

适用于您的情况。

＆＃13;

$(document).on('click', '.next-tab', function(){
    $('.active-tab').addClass( 'prev prev-tab' );
    $('.active-tab').removeClass('active active-tab');
    $('.next-tab').addClass('active active-tab');
    $('.next-tab').removeClass('next next-tab');
});
$(document).on('click', '.prev-tab', function(){
		$('.active-tab').addClass( 'next next-tab' );
    $('.active-tab').removeClass('next active-tab');
    $('.prev-tab').addClass( 'active active-tab' );
    $('.prev-tab').removeClass('prev prev-tab');
});

＆＃13;

li {
  width:150px;
  height:100px;
  background-color:#EDCFA5;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="active active-tab">
        <span class="text">Tab 1</span>
    </li>
    <li class="next next-tab">
        <span class="text">Tab 2</span>
    </li>

＆＃13;

有jQuery DOM选择类元素的问题

2 个答案: