javascript - jQuery Selector 对应的图片和li

Question

我想在点击相应图像后更改 li 标签的列表样式。这是我到目前为止所得到的。

jsFiddle

$('#foodOrder').click(function() {
      $(this " > li").css('list-style', 'disc');
    });

#foodOrder {
  list-style: circle;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<span id="foodOrder"><img id="orderFood" src="http://zoarchurch.co.uk/content/pages/uploaded_images/91.png" alt="" /><li>CIABATTA</li></span>
      <span id="foodOrder"><img id="orderFood" src="http://zoarchurch.co.uk/content/pages/uploaded_images/91.png" alt="" /><li>BAKERS BUN</li></span>

Answer 1

修复了您的 jQuery 选择器(语法错误)和 HTML:

1. <li> 必须仅在 <ul> 中, <ol> 或 <menu> .
2. <span> 必须仅包含 Phrasing content , <ul> 是Flow content .你应该使用 <div> 那么。

JSFiddle

$('.foodOrder').click(function() {
    $('li', this).css('list-style', 'disc');
});

.foodOrder li {
    list-style: circle;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="foodOrder">
    <img class="orderFood" src="http://zoarchurch.co.uk/content/pages/uploaded_images/91.png" alt=""/>
    <ul>
        <li>CIABATTA</li>
    </ul>
</div>
<div class="foodOrder">
    <img class="orderFood" src="http://zoarchurch.co.uk/content/pages/uploaded_images/91.png" alt=""/>
    <ul>
        <li>BAKERS BUN</li>
    </ul>
</div>