jquery - 更改 li 内 span 内内容的 css

Question

我正在尝试在 jQuery Mobile 的 ListView 中设置已读/未读消息的样式。

                    <ul data-role="listview" data-theme="c" id="#messageList" style="padding-top:10%;">

                    <li data-icon="false">
                        <a href="#" onclick="messageClick()">
                         <p>
                            <span style="float:left;clear:left;font-weight: bold;text-decoration:underline;color:blue;white-space:pre-wrap; width:30ex">Some unread text</span>
                            <span style="float:right;font-weight: bold;">08/02/13</span>   
                         </p>
                        </a>
                    </li>
                    .....
                    </ul>

里面的 messageClick() 我有:

function messageClick(){    
    $(this).findclosest("span").css("font-weight","normal");
}

但是好像不行。我哪里错了？

Answer 1

findclosest不是函数。查看您的 javascript 控制台，我确定您遇到了错误。还有 this可能没有设置为元素，而是设置为窗口，因为您是在全局范围内调用它。您可能想要的是:<a href="#" class="messageClick">

和

$('#messagelist').on('click','a.messageClick', function() {
    $(this).parent().find('span').first().css(...);
    return false;
}

请注意，我去了父级然后找到第一个跨度。我这样做是因为 block 元素 p不能存在于 a 中所以不同的浏览器可能会以不同的方式对待它。我强烈建议使用类而不是内联样式，并基于这些类而不是一些随机的 DOM 层次结构进行定位。您的代码需要进行一些认真的清理!