Question

以下脚本在我的HTML页面上不起作用，任何建议：

$(document).ready(function() {
    $('li.nf-next-item').click(function() {
        $(".step-1").removeClass('displayBlock').addClass('displayNone');
        $(".step-2").removeClass('displayNone').addClass('displayBlock');
    });
});

jQuery也已添加到文件中。（<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.js"></script>）

以下是HTML代码，位于.php文件中（实际上是wordpress主题）：

<div class="sidebar-header">
            <div class="step-1 displayBlock">
                <h2 class="formTitle"> <?php the_field('title_step_1') ?></h2>
                <h3> <?php the_field('text_step_1') ?></h3>
            </div>
            <div class="step-2 displayNone">
                <h2 class="formTitle"><?php the_field('title_step_2') ?></h2>
                <h3> <?php the_field('text_step_2') ?></h3>
            </div>
        </div>

Answer 1

尝试：

$('li.nf-next-item').on('click', function() {
    $(".step-1").removeClass('displayBlock').addClass('displayNone');
    $(".step-2").removeClass('displayNone').addClass('displayBlock');
});

最好使用.on，因为它会占用较少的内存并可以动态添加元素。

Answer 2

最有可能的是，您要绑定事件的元素在进行绑定时尚未添加到标记中。

为了解决此问题，您应该在运行脚本时将其包装到页面中存在的元素的任何祖先。

例如：

$('.sidebar-header').on('click', 'li.nf-next-item', function(){
  $(".step-1").removeClass('displayBlock').addClass('displayNone');
  $(".step-2").removeClass('displayNone').addClass('displayBlock');
})

您还可以将整个代码包装在一个函数中，检查要绑定的元素是否存在，如果不存在，请等待一段时间，然后再次运行该函数。示例：

function binderCallback() {
  $(".step-1").removeClass('displayBlock').addClass('displayNone');
  $(".step-2").removeClass('displayNone').addClass('displayBlock');
}
function scriptBinder() {
  if ($('.sidebar-header').is('.sidebar-header')) {
    $('.sidebar-header').on('click', 'li.nf-next-item', binderCallback);
  } else {
    setTimeout(() => {scriptBinder()}, 1000);
  }
}
$(() => { scriptBinder() });

但是，此构造有潜在的危险，因此应避免使用，因为无论出于何种原因，您正在等待的元素都不会添加到页面中，您的脚本将永远继续调用自身。围绕此的一种安全措施是在函数中放置一个迭代器，并仅允许其调用有限次。该示例在以1秒为间隔的10次尝试后退出尝试进行绑定：

let binderCounter = 0, 
    binderCallback = function() {
      $(".step-1").removeClass('displayBlock').addClass('displayNone');
      $(".step-2").removeClass('displayNone').addClass('displayBlock');
    };

function scriptBinder() {
  if ($('.sidebar-header').is('.sidebar-header')) {
    $('.sidebar-header').on('click', 'li.nf-next-item', binderCallback);
  } else {
    if (binderCounter++ < 10)
      setTimeout(() => {scriptBinder()}, 1000);
  }
}
$(() => { scriptBinder() });

上述的另一种选择是绑定到您确定绑定时存在的元素。像<body>：

$('body').on('click', 'li.nf-next-item', function(){
  $(".step-1").removeClass('displayBlock').addClass('displayNone');
  $(".step-2").removeClass('displayNone').addClass('displayBlock');
})

虽然上述方法肯定可以工作（当然，只要您的li.nf-next-item是正确的），但这并不是最佳选择。
如他们的documentation所述：

在文档树的顶部附近附加许多委派的事件处理程序可能会降低性能。每次事件发生时，jQuery必须将该类型所有附加事件的所有选择器与从事件目标到文档顶部的路径中的每个元素进行比较。为了获得最佳性能，请在尽可能靠近目标元素的文档位置附加委托事件。避免在大型文档上的委派事件中过多使用document或document.body。

Answer 3

要在其中应用点击的按钮或li的html在哪里？

检查li.nf-next-item是否为li元素，并且将该类（nf-next-item）添加到该li元素上。如果那是一个按钮，将无法使用。

如果它是一个动态元素，以后又要添加，则可以使用$('body').on('click', 'li.nf-next-item', function() {而不是$('li.nf-next-item').click(function() {来完成。

jQuery不适用于Element类单击

3 个答案: