Question

所以我的任务是使用Wordpress创建一个网站，在主页上有一个滑块，如果你点击下面的按钮，它会显示另一个图像，简单吧？好吧，我已经获得了滑块，而且我已经有了按钮，我已经添加了jQuery并且它不想工作。

我首先尝试按钮实际按钮：

<button type="button" class="btn btn-success" id="hideshow-healthcare">Healthcare</button>

当我使用它时工作正常：

    jQuery(document).ready(function() {
    jQuery('#hideshow-healthcare').on('click', function() {
        jQuery('#healthcare').show();
    };
};

所以在让它像这样工作之后，我继续将按钮设置为li而不是让我可以按照设计进行操作。执行此操作后，滑块不再起作用。我已经尝试过多种不同的东西，包括在li中的所有内容中添加ID以查看是否可行，而且遗憾的是没有。我做了一些研究并试图改变

    jQuery('#hideshow-healthcare').on('click', function() {

到

    jQuery('li#hideshow-healthcare').on('click', function() {

但仍然没有运气。我希望有人能够解决这个问题。

此外，这是我目前使用的li代码：

<li><a id="hideshow-healthcare"><h5>HEALTHCARE</h5> Lighting to create a feeling of well being</a></li>

Answer 1

您需要在li元素后添加空格才能找到其后代#hideshow-healthcare。它应该是

 jQuery('li #hideshow-healthcare').on('click', function() {

Answer 2

#hideshow-healthcare是李的孩子。在jquery中使用descendant selector

jQuery('li a#hideshow-healthcare').on('click', function(event) {
       event.preventDefault(); // prevents default action 
       // your code 
});

我在html中是唯一的你只需用id

直接写

jQuery('#hideshow-healthcare').on('click', function(event) {
           event.preventDefault(); // prevents default action 
           // your code 
 });

jQuery - .on（＆＃39;点击＆＃39;）不在<li>上工作

2 个答案: