Question

我目前正在使用WordPress，我希望通过点击另一个文本行淡入一些文本。我只想要纯文本（例如文本作为按钮）并且具有很好的淡入效果。

我已经尝试过这个，但它在wordpress中不起作用。我从网上的某个地方得到了这个：

HTML：

<span class="button">Text button</span>
<span class="fadein">You just clicked on "Text button"</span>

的CSS：

.button { cursor: pointer; }

Jquery的：

$('.fadein').hide();

$('.button').on('click', function(){
     $('.fadein').fadeIn(2000);
});

Answer 1

尝试在加载jQuery JavaScript库后执行jQuery代码。另外，将jQuery代码包装在on document ready范围内。

// Shorthand for $(document).ready()
$(function(){
  // Your jQuery code goes here
});

Answer 2

@Satpal是正确的，你需要在wordpress中使用jQuery而不是$。新代码如下所示：

jQuery('.fadein').hide();

jQuery('.button').on('click', function(){
     jQuery('.fadein').fadeIn(2000);
});

上面的代码在wordpress中应该可以正常运行，假设您已经调用了jQuery库，并且您将代码放在正确的位置。正如@Giancarlo所提到的，你也应该将它包装在一个文档就绪的脚本中，但它也需要像jQuery那样：

jQuery(document).ready(function(){
    jQuery('.fadein').hide();

    jQuery('.button').on('click', function(){
         jQuery('.fadein').fadeIn(2000);
    });
});

将此代码放入单独的.js文件中，并使用wp_enqueue_script

在主题的functions.php文件中调用它

它应该可以正常工作

通过文本按钮淡入文本

2 个答案: