Question

以下是我的HTML文档：

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="scripts/homepage-script.js"></script>
</head>

<body>
<div id="how-it-works">
    <p>How It Works</p>
    <img src="some-imageurl">
    <div id="steps">
    <p>Step 1</p>
    <p>Step 2</p>
    <p>Step 3</p>
</div>

这是我的剧本：

$('#steps > p').on('click' , function(){
    $('steps > p').css('background', 'yellow');
});

为什么我的脚本没有在我的网站上运行？

Answer 1

你需要将jQuery包装在一个文档中，你可以使用$（this），因为它是在onclick事件中的目标：

$(document).ready(function(){
     $('#steps > p').on('click',function(){
          $(this).css('background', 'yellow');
    });
})

然而，我建议有一个高亮类，然后在onclick事件中切换;

//CSS
.highlight{background:yellow}


$(document).ready(function(){
     $('#steps > p').on('click',function(){
          $(this).toggleClass('highlight');
    });
})

您正在添加/删除类而不是更改元素CSS。

如果你想根据@Phil评论将高亮类添加到该div中的所有p中 -

$(document).ready(function(){
     $('#steps > p').on('click',function(){
         $('#steps > p').toggleClass('highlight');
    });
})

$(document).ready(function(){
     $('#steps > p').on('click',function(){
          $(this).toggleClass('highlight');
    });
})

.highlight{background:yellow}

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="scripts/homepage-script.js"></script>
</head>

<body>
<div id="how-it-works">
    <p>How It Works</p>
    <img src="some-imageurl">
    <div id="steps">
    <p>Step 1</p>
    <p>Step 2</p>
    <p>Step 3</p>
</div>
  </body>
  </html>

Answer 2

您在嵌套的代码行中缺少#选择器：

$('#steps > p').css('background', 'yellow');

这会使{em>所有的p元素变为黄色背景。如果您只想要用户点击的元素，那么引用＆＃34;选择＆＃34;对象$(this)：

$('#steps > p').on('click' , function(){
    $(this).css('background', 'yellow');
});

Answer 3

脚本应该在div之后。

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

</head>

<body>
<div id="how-it-works">
    <p>How It Works</p>
    <img src="some-imageurl">
    <div id="steps">
    <p>Step 1</p>
    <p>Step 2</p>
    <p>Step 3</p>
</div>

<!--The script should be after the div.-->
<script src="scripts/homepage-script.js"></script>

为什么我的JavaScript代码拒绝在我的网站上运行？

3 个答案: