jQuery - 遍历DOM

Question

这是我的HTML：

                    <li>
                        <div class="menu_inner">
                            <a href="#">
                                <div class="button"><img class="486" src="images/portalbutton.png" /></div>
                                <div class="prod_description">&nbsp;</div>
                            </a>
                        </div>
                    </li>

我想在.prod_description中添加一个.click（）函数，click事件应该从li元素中采用CSS中应用的背景颜色。

使用此代码：

$(".prod_description").mousedown(function() {
    $('#toolbar').css('background-color', $(this).parent().css('background-color'))
})

我似乎无法获得正确的$(this).parent()组合....

Answer 1

你可以这样做：

$(".prod_description").mousedown(function() {
    $('#toolbar').css('background-color', $(this).closest('li').css('background-color'))
});

.parent()获得直接父级，您希望上升几级（<a>，<div>，<li>）。 .closest('li')爬上父母并获得第一个<li>。在这种情况下，.parent('li')也可以起作用：）

Answer 2

在javascript中，您必须使用backgroundColor，而不是background-color。

更新：事实证明，jQuery能够处理both formats，甚至DOM API本身也可以让您执行以下操作：obj.style.setProperty('background-color', 'red');

Answer 3

使用点击事件代替mousedown。使用closest获取li元素

$("div.prod_description").click(function() {
    $('#toolbar').css('background-color', $(this).closest('li').css('background-color'))
});

我在click事件中也使用了标签选择器。如果你可以在CSS类中给出背景颜色，那么你可以使用类似的东西

li.mybg { background-color: #a9a9a9; }

<li class="mybg">
   <div class="menu_inner">
      <a href="#">
         <div class="button">
             <img class="486" src="images/portalbutton.png" />
         </div>
         <div class="prod_description">&nbsp;</div>
      </a>
   </div>
 </li>

$("div.prod_description").click(function() {
    $('#toolbar').addClass('mybg');
});