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;
}

请注意，我找到了父母，然后找到了第一个跨度。我之所以这样做是因为p中不能存在块元素a，因此不同的浏览器可能会采用不同的方式对待。我强烈建议使用类而不是内联样式，并基于这些类而不是一些随机DOM层次结构进行定位。您的代码可能会使用一些严重的清理工作！

Answer 2

jQuery文档中不存在findclosest()。如果您想访问<li＆gt;下的第一个范围这样的事情应该有效：

function messageClick(){    
    $(this).find("p > span:first").css("font-weight","normal");
}

如果您想更改两个范围，可以从选择器中删除:first，如果没有多个范围，甚至可以只使用$(this).find("span")。

Answer 3

您希望find()不是findclosest() - 这不存在：

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

Answer 4

jQuery Mobile与onclick =“...或occhange =”...事件不兼容，它们与jQM页面事件触发冲突。

你应该手动绑定点击事件：

$(document).on('pagebeforeshow', '#index', function(){       
    $(document).on('click', '#messageList li a', function(){   
        $(this).find("span:first").css("font-weight","normal");
    });    
});

这是一个有效的sjFiddle示例：http://jsfiddle.net/Gajotres/Speu2/

Answer 5

您可能想使用.find，因为我认为.findclosest不存在（.closest确实存在但不适用于此）

更改li里面内容的css

5 个答案: