更改 ul li 父颜色

Change ul li parent color

本文关键字：颜色 li ul 更改      更新时间：2023-09-26

我在HTML中有这段代码：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Form</title>
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="script.js"></script>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>

    <ul class="cars_menu">
        <li>Audi
            <ul>
                <li class="highlight">A4</li>
                <li>A6</li>
                <li>A3</li>
                <li>A5</li>
            </ul>
        </li>
        <li>Volkswagen
            <ul>
                <li>Golf IV</li>
                <li>Golf VI</li>
                <li>Golf V</li>
                <li>Jetta</li>
            </ul>
        </li>
        <li>BMW
            <ul>
                <li>E36</li>
                <li>E60</li>
                <li>E70</li>
                <li>Z4</li>
            </ul>
        </li>
    </ul>
</body>
</html>

CSS代码：

.highlight {
    color: red;
 }

还有我的脚本文件：

$( "ul.cars_menu li" ).click(function() {
  $( this ).toggleClass( "highlight" );
});

任何人都知道如何更改奥迪的颜色，如果我单击 A4、A6，它应该将 A4 和奥迪的颜色设置为红色，例如如果我单击 GOLF IV，它需要将大众汽车和高尔夫 IV 更改为红色等等。

有人可以帮助我吗？欣赏，伙计们:)

请将 html 代码更改为

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Form</title>
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="script.js"></script>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>

    <ul class="cars_menu">
        <li>Audi</li>
        <li>
            <ul class="model">
                <li>A4</li>
                <li>A6</li>
                <li>A3</li>
                <li>A5</li>
            </ul>
        </li>
        <li>Volkswagen</li>
        <li>
            <ul class="model">
                <li>Golf IV</li>
                <li>Golf VI</li>
                <li>Golf V</li>
                <li>Jetta</li>
            </ul>
        </li>
        <li>BMW</li>
        <li>
            <ul class="model">
                <li>E36</li>
                <li>E60</li>
                <li>E70</li>
                <li>Z4</li>
            </ul>
        </li>
    </ul>
</body>
</html>

J查询代码到

$( "ul.model li" ).click(function() {
    $( this ).parent().removeClass( "highlight" );
  $( this ).toggleClass( "highlight" );
    $( this ).parent().parent().prev('li').toggleClass( "highlight" );
});

希望它能奏效!!.

你需要将

你的jQuery包装在一个：

 $(document).ready(function() {
     $('ul.cars_menu li').click(function() {
         $( this ).toggleClass( "highlight" );
     });
 });

这样做的原因 - 您需要等待 DOM 完成加载，然后才能在页面下方的元素上设置事件......

$（document）.ready 事件是当 DOM 完成加载并且可以操作时...

编辑以包括js摆弄一些有关如何完成此操作的示例：http://jsfiddle.net/7gdzLgam/

关于如何使用jquery定位父元素的答案仍然是原始问题

。

你应该能够为此使用 .parent（）。像这样：

$（ this ）.parent（）.toggleClass（ "highlight" ）;

你可以通过做来检查点击的li的值 

$( "ul.cars_menu li" ).click(function() {
    if ($( this ).text() == 'A4'){
       //change css
    }
});

下载 js 文件时不会创建 DOM 元素。你的JavaScript是正确的，但你需要包括你的 

<script src="script.js"></script>

在正文标签的末尾，以便它可以工作。

这是因为当加载javascript时，它会检查您在js文件中指定的dom元素。它将无法找到该元素，因为 dom 尚未完全创建。所以它只是忽略了它。

或者将javascript包装在里面

$(document).ready(function(){
    //Your code here
});

这样除非创建 DOM 元素，否则不会执行 js。

相关文章：