Question

我在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" );
});

任何人都知道，如何更改AUDI的颜色，如果我点击A4，A6它应该将A4和AUDI的颜色设置为红色，如果我点击GOLF IV则需要更换大众汽车和GOLF IV红色等等。

任何人都可以帮我这个吗？感谢，伙计:)

Answer 1

请将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>

Jquery代码

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

希望它能起作用!!!。

Answer 2

你应该能够使用.parent（）。类似的东西：

$（this）.parent（）。toggleClass（“highlight”）;

Answer 3

您可以通过执行

检查点击的li的值

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

Answer 4

你需要将jQuery包装在：

中

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

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

$（document）.ready事件是DOM完成加载的时间。可以被操纵......

编辑以包含js以及如何完成此操作的一些示例： http://jsfiddle.net/7gdzLgam/

关于如何使用原始问题的jquery来定位父元素的答案仍然适用于上面的例子。

Answer 5

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

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

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

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

或者将javascript包装在

中

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

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

更改ul li父颜色

5 个答案: